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

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

@@ -0,0 +1,172 @@
+const normalize = (text) => text.toLocaleLowerCase().normalize("NFKD");
+function score(label, haystack, tokens) {
+    if (!tokens.every((t) => haystack.includes(t)))
+        return null;
+    const l = normalize(label);
+    const q = tokens.join(" ");
+    if (l === q)
+        return 0;
+    if (l.startsWith(q))
+        return 1;
+    if (l.split(/\s+/).some((w) => w.startsWith(tokens[0])))
+        return 2;
+    return l.includes(tokens[0]) ? 3 : 4;
+}
+function rank(rows, text, tokens) {
+    return rows
+        .map((row, index) => ({
+        row,
+        index,
+        s: score(row.label, normalize(text(row)), tokens),
+    }))
+        .filter((r) => r.s !== null)
+        .sort((a, b) => a.s - b.s || a.index - b.index)
+        .map((r) => r.row);
+}
+export function flattenScreens(sections) {
+    var _a, _b, _c;
+    const seen = new Set();
+    const out = [];
+    for (const section of sections) {
+        for (const module of section.modules) {
+            for (const screen of module.screens) {
+                if (seen.has(screen.id))
+                    continue;
+                seen.add(screen.id);
+                out.push({
+                    id: `screen:${screen.id}`,
+                    screenId: screen.id,
+                    label: screen.label,
+                    context: screen.label === module.label ? section.label : module.label,
+                    icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon,
+                    badge: screen.badge,
+                    href: screen.href,
+                    keywords: [module.label, ...((_b = module.keywords) !== null && _b !== void 0 ? _b : []), ...((_c = screen.keywords) !== null && _c !== void 0 ? _c : [])].join(" "),
+                });
+            }
+        }
+    }
+    return out;
+}
+export function searchLauncher(input) {
+    var _a, _b;
+    const tokens = normalize(input.query).split(/\s+/).filter(Boolean);
+    if (tokens.length === 0)
+        return [];
+    const screens = flattenScreens(input.sections);
+    const actions = rank(((_a = input.actions) !== null && _a !== void 0 ? _a : []).map((a) => ({ ...a, id: `action:${a.id}` })), (a) => { var _a, _b; return `${a.label} ${(_a = a.context) !== null && _a !== void 0 ? _a : ""} ${(_b = a.keywords) !== null && _b !== void 0 ? _b : ""}`; }, tokens);
+    const groups = [
+        { id: "actions", label: input.actionsLabel, items: actions },
+        {
+            id: "screens",
+            label: input.screensLabel,
+            items: rank(screens, (s) => { var _a; return `${s.label} ${(_a = s.context) !== null && _a !== void 0 ? _a : ""} ${s.keywords}`; }, tokens),
+        },
+        ...((_b = input.extraResults) !== null && _b !== void 0 ? _b : []).map((g) => ({
+            id: g.id,
+            label: g.label,
+            items: g.items.map((i) => ({ ...i, id: `${g.id}:${i.id}` })),
+        })),
+    ];
+    return groups.filter((g) => g.items.length > 0);
+}
+function matchNameOrKeyword(label, keywords, tokens) {
+    const name = normalize(label);
+    if (tokens.every((t) => name.includes(t)))
+        return {};
+    const terms = keywords.map(normalize);
+    const all = `${name} ${terms.join(" ")}`;
+    if (!tokens.every((t) => all.includes(t)))
+        return null;
+    const hit = keywords.find((_, i) => tokens.some((t) => terms[i].includes(t)));
+    return { keyword: hit !== null && hit !== void 0 ? hit : keywords[0] };
+}
+/** Search that keeps the sections: per section, matching modules, each followed by its matching screens. */
+export function searchLauncherSections(input) {
+    var _a, _b, _c, _d, _e, _f;
+    const tokens = normalize(input.query).split(/\s+/).filter(Boolean);
+    if (tokens.length === 0)
+        return { sections: [], groups: [] };
+    const seen = new Set();
+    const sections = [];
+    for (const section of input.sections) {
+        const items = [];
+        for (const module of section.modules) {
+            const moduleHit = matchNameOrKeyword(module.label, (_a = module.keywords) !== null && _a !== void 0 ? _a : [], tokens);
+            if (moduleHit) {
+                items.push({
+                    id: `module:${module.id}`,
+                    kind: "module",
+                    label: module.label,
+                    keywordHint: moduleHit.keyword,
+                    icon: module.icon,
+                    badge: module.badge,
+                    isNew: module.isNew,
+                    href: module.href,
+                    screenId: (_b = module.screens[0]) === null || _b === void 0 ? void 0 : _b.id,
+                });
+            }
+            for (const screen of module.screens) {
+                if (screen.label === module.label || seen.has(screen.id))
+                    continue;
+                if (!matchNameOrKeyword(screen.label, (_c = screen.keywords) !== null && _c !== void 0 ? _c : [], tokens))
+                    continue;
+                seen.add(screen.id);
+                items.push({
+                    id: `screen:${screen.id}`,
+                    kind: "screen",
+                    label: screen.label,
+                    context: module.label,
+                    icon: (_d = screen.icon) !== null && _d !== void 0 ? _d : module.icon,
+                    badge: screen.badge,
+                    href: screen.href,
+                });
+            }
+        }
+        if (items.length > 0)
+            sections.push({ id: section.id, label: section.label, items });
+    }
+    const actions = rank(((_e = input.actions) !== null && _e !== void 0 ? _e : []).map((a) => ({ ...a, id: `action:${a.id}` })), (a) => { var _a, _b; return `${a.label} ${(_a = a.context) !== null && _a !== void 0 ? _a : ""} ${(_b = a.keywords) !== null && _b !== void 0 ? _b : ""}`; }, tokens);
+    const groups = [
+        { id: "actions", label: input.actionsLabel, items: actions },
+        ...((_f = input.extraResults) !== null && _f !== void 0 ? _f : []).map((g) => ({
+            id: g.id,
+            label: g.label,
+            items: g.items.map((i) => ({ ...i, id: `${g.id}:${i.id}` })),
+        })),
+    ].filter((g) => g.items.length > 0);
+    return { sections, groups };
+}
+/** Splits `text` so every case-insensitive occurrence of a query token is its own matched segment. */
+export function highlightSegments(text, query) {
+    const lower = text.toLocaleLowerCase();
+    const tokens = query.toLocaleLowerCase().split(/\s+/).filter(Boolean);
+    if (tokens.length === 0 || lower.length !== text.length)
+        return [{ text, isMatch: false }];
+    const ranges = [];
+    for (const token of tokens) {
+        for (let at = lower.indexOf(token); at !== -1; at = lower.indexOf(token, at + token.length)) {
+            ranges.push([at, at + token.length]);
+        }
+    }
+    ranges.sort((a, b) => a[0] - b[0]);
+    const merged = [];
+    for (const range of ranges) {
+        const last = merged[merged.length - 1];
+        if (last && range[0] <= last[1])
+            last[1] = Math.max(last[1], range[1]);
+        else
+            merged.push([...range]);
+    }
+    const out = [];
+    let cursor = 0;
+    for (const [start, end] of merged) {
+        if (start > cursor)
+            out.push({ text: text.slice(cursor, start), isMatch: false });
+        out.push({ text: text.slice(start, end), isMatch: true });
+        cursor = end;
+    }
+    if (cursor < text.length)
+        out.push({ text: text.slice(cursor), isMatch: false });
+    return out.length ? out : [{ text, isMatch: false }];
+}

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

@@ -0,0 +1,15 @@
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch. */
+export const revealStyles = (colors) => {
+    const ring = focusVisibleStyles(colors);
+    return {
+        ...ring,
+        _focusVisible: { ...ring._focusVisible, opacity: 1 },
+        _groupHover: { opacity: 1 },
+        _groupFocusWithin: { opacity: 1 },
+        "[data-reveal=true] &": { opacity: 1 },
+        "@media (hover: none)": { opacity: 1 },
+        ...reducedMotionSx(),
+    };
+};

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Stack, Text, } from "@chakra-ui/react";
 import Avatar from "../Avatar/Avatar.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
@@ -10,7 +10,7 @@ import PersonChip from "../PersonChip/PersonChip.js";
 import { CircleArrowLeft, LogOut, PanelLeftClose, PanelRightClose, } from "lucide-react";
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
-export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, }) {
+export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, leading, }) {
     const theme = useCustomTheme();
     const rowBackgrounds = listRowBackgrounds(theme.colors);
     const menuHoverBg = rowBackgrounds.active;
@@ -46,7 +46,7 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
     };
-    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(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 ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(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: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(Text, { color: 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 }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(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 ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(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: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && (_jsxs(_Fragment, { children: [leading, _jsx(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) && (_jsx(Text, { color: 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 }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(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/esm/Components/PageHeader/PageHeader.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Heading, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const TITLE_STYLES = {
+    md: { fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em" },
+    lg: { fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.2 },
+    xl: { fontSize: { base: "2xl", md: "3xl" }, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.2 },
+};
 /** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
-const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, "data-testid": testId, }) => {
+const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize = "md", actionsLayout = "auto", "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), _jsxs(Flex, { justify: "space-between", align: { base: "flex-start", md: "center" }, direction: { base: "column", md: "row" }, gap: 3, children: [_jsxs(Flex, { gap: 3, align: "center", minW: 0, children: [leading && _jsx(Box, { flexShrink: 0, children: leading }), _jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Heading, { as: "h1", fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em", color: colors.header[900], children: title }), titleAddon] }), subtitle && (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && (_jsx(Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && (_jsx(Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: 0, children: actions }))] }), tabs && _jsx(Box, { children: tabs })] }));
+    const wraps = actionsLayout === "auto";
+    const stacked = actionsLayout === "stacked";
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), _jsxs(Flex, { justify: "space-between", align: stacked ? "flex-start" : { base: "flex-start", md: "center" }, direction: stacked ? "column" : { base: "column", md: "row" }, wrap: wraps ? "wrap" : "nowrap", gap: 3, children: [_jsxs(Flex, { gap: 3, align: "center", minW: 0, flex: wraps ? { base: "0 1 auto", md: "1 1 16rem" } : undefined, children: [leading && _jsx(Box, { flexShrink: 0, children: leading }), _jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Heading, { as: "h1", ...TITLE_STYLES[titleSize], color: colors.header[900], children: title }), titleAddon] }), subtitle && (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && (_jsx(Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && (_jsx(Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: wraps ? undefined : 0, children: actions }))] }), tabs && _jsx(Box, { children: tabs })] }));
 };
 export default PageHeader;

package/dist/esm/Components/PdfViewer/PdfViewer.js

@@ -1,16 +1,137 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { Download, ExternalLink, FileText } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import Button from "../Button/Button.js";
+import Skeletons from "../Skeletons/Skeletons.js";
 import ToolTip from "../ToolTip/ToolTip.js";
+const DEFAULT_LABELS = {
+    open: "Open in new tab",
+    download: "Download",
+    unsupported: "This browser can't display PDFs inline. Open or download the file instead.",
+    failed: "The document could not be loaded.",
+};
+const canEmbedPdf = () => typeof navigator === "undefined" || navigator.pdfViewerEnabled !== false;
+const asPdf = (blob) => (blob.type ? blob : new Blob([blob], { type: "application/pdf" }));
 /** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
-const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
+const PdfViewer = ({ pdfUrl, getBlob, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", fallback, onLoad, onError, labels, "data-testid": testId, }) => {
     const theme = useCustomTheme();
+    const text = { ...DEFAULT_LABELS, ...labels };
     const toolbarSurface = theme.colors.background[50];
     const iconHoverInk = accentTextOnCanvas(theme.colors.primary, toolbarSurface);
     const iconHoverBg = listRowBackgrounds(theme.colors).active;
-    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": `Open ${fileName} in a new tab`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, "aria-label": `Download ${fileName}`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    const supported = canEmbedPdf();
+    const isBlobMode = Boolean(getBlob);
+    const getBlobRef = useRef(getBlob);
+    const onLoadRef = useRef(onLoad);
+    const onErrorRef = useRef(onError);
+    getBlobRef.current = getBlob;
+    onLoadRef.current = onLoad;
+    onErrorRef.current = onError;
+    const [status, setStatus] = useState(isBlobMode && supported ? "loading" : "idle");
+    const [objectUrl, setObjectUrl] = useState(null);
+    const tempUrls = useRef([]);
+    useEffect(() => {
+        var _a;
+        if (!isBlobMode || !supported)
+            return undefined;
+        let cancelled = false;
+        let created = null;
+        setStatus("loading");
+        setObjectUrl(null);
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            var _a;
+            if (cancelled)
+                return;
+            created = URL.createObjectURL(asPdf(blob));
+            setObjectUrl(created);
+            setStatus("ready");
+            (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef);
+        }, (error) => {
+            var _a;
+            if (cancelled)
+                return;
+            setStatus("error");
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+        return () => {
+            cancelled = true;
+            if (created)
+                URL.revokeObjectURL(created);
+        };
+    }, [isBlobMode, supported]);
+    useEffect(() => () => {
+        tempUrls.current.forEach((url) => URL.revokeObjectURL(url));
+        tempUrls.current = [];
+    }, []);
+    const makeTempUrl = useCallback((blob) => {
+        const url = URL.createObjectURL(asPdf(blob));
+        tempUrls.current.push(url);
+        return url;
+    }, []);
+    const openBlob = () => {
+        var _a;
+        if (objectUrl) {
+            window.open(objectUrl, "_blank", "noopener");
+            return;
+        }
+        const tab = window.open("", "_blank");
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const url = makeTempUrl(blob);
+            if (tab)
+                tab.location.href = url;
+            else
+                window.location.assign(url);
+        }, (error) => {
+            var _a;
+            tab === null || tab === void 0 ? void 0 : tab.close();
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+    };
+    const downloadBlob = () => {
+        var _a;
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const link = document.createElement("a");
+            link.href = makeTempUrl(blob);
+            link.download = fileName;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        }, (error) => { var _a; return (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error); });
+    };
+    const toolbarLabel = (kind) => {
+        if (labels === null || labels === void 0 ? void 0 : labels[kind])
+            return `${labels[kind]} ${fileName}`;
+        return kind === "open" ? `Open ${fileName} in a new tab` : `Download ${fileName}`;
+    };
+    const actionStyle = {
+        p: 2,
+        borderRadius: "lg",
+        color: theme.colors.gray[600],
+        _hover: { bg: iconHoverBg, color: iconHoverInk },
+    };
+    const openAction = isBlobMode ? (_jsx(Box, { as: "button", type: "button", onClick: openBlob, "aria-label": toolbarLabel("open"), ...actionStyle, children: _jsx(ExternalLink, { size: 16, "aria-hidden": "true" }) })) : (_jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": toolbarLabel("open"), ...actionStyle, children: _jsx(ExternalLink, { size: 16, "aria-hidden": "true" }) }));
+    const downloadAction = isBlobMode && !objectUrl ? (_jsx(Box, { as: "button", type: "button", onClick: downloadBlob, "aria-label": toolbarLabel("download"), ...actionStyle, children: _jsx(Download, { size: 16, "aria-hidden": "true" }) })) : (_jsx(Box, { as: "a", href: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, download: fileName, "aria-label": toolbarLabel("download"), ...actionStyle, children: _jsx(Download, { size: 16, "aria-hidden": "true" }) }));
+    const showFallback = !supported || status === "error";
+    const isLoading = isBlobMode && supported && status === "loading";
+    const renderFallback = () => {
+        if (fallback !== undefined)
+            return fallback;
+        return (_jsxs(Flex, { direction: "column", align: "flex-start", gap: 3, p: 4, "data-testid": "pdf-fallback", children: [_jsx(Text, { role: "status", fontSize: "sm", color: theme.colors.textMuted, children: supported ? text.failed : text.unsupported }), !showToolbar && (_jsxs(Flex, { gap: 2, wrap: "wrap", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", leftIcon: _jsx(ExternalLink, { size: 16, "aria-hidden": "true" }), label: text.open, onClick: isBlobMode ? openBlob : () => window.open(pdfUrl, "_blank", "noopener"), "data-testid": "pdf-open" }), _jsx(Button, { variant: "outline", colorScheme: "gray", leftIcon: _jsx(Download, { size: 16, "aria-hidden": "true" }), label: text.download, onClick: isBlobMode ? downloadBlob : directDownload(pdfUrl, fileName), "data-testid": "pdf-download" })] }))] }));
+    };
+    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], "data-testid": testId, children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText, "aria-hidden": "true" }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: text.open, placement: "top", children: openAction }), _jsx(ToolTip, { label: text.download, placement: "top", children: downloadAction })] })] })), showFallback ? (renderFallback()) : isLoading ? (_jsx(Box, { "aria-busy": "true", "data-testid": "pdf-loading", children: _jsx(Skeletons, { type: "skeleton", height: height, width: "100%", borderRadius: "0" }) })) : (_jsx(Box, { as: "embed", src: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, type: "application/pdf", title: fileName, onLoad: isBlobMode ? undefined : () => { var _a; return (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef); }, width: "100%", height: height, display: "block" }))] }));
+};
+const directDownload = (url, fileName) => () => {
+    if (!url)
+        return;
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
 };
 export default PdfViewer;

package/dist/esm/Components/Search/Search.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from "react";
-import { Input, InputGroup, InputLeftElement, InputRightElement, Icon, IconButton, Kbd, FormControl, useMergeRefs, } from "@chakra-ui/react";
+import { Input, InputGroup, InputLeftElement, InputRightElement, Icon, IconButton, FormControl, useMergeRefs, } from "@chakra-ui/react";
 import { Search as SearchIconComponent, X } from "lucide-react";
+import Kbd from "../Kbd/Kbd.js";
 import { TextLabel } from "../Common/FormLabel.js";
 import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
@@ -44,6 +45,6 @@ const Search = forwardRef(function Search({ placeholder = "Search...", onSearch,
                             ps: spec.height,
                             pe: rightPadding,
                             ...reducedMotionSx(),
-                        } }), (showClear || showHint) && (_jsxs(InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && (_jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: focusVisibleStyles(theme.colors) })), showHint && (_jsx(Kbd, { "aria-hidden": true, fontSize: "0.6875rem", fontWeight: 500, color: theme.colors.textMuted, bg: theme.colors.backgroundColor.subtle, borderColor: theme.colors.boxborder[200], whiteSpace: "nowrap", children: shortcut }))] }))] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                        } }), (showClear || showHint) && (_jsxs(InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && (_jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: focusVisibleStyles(theme.colors) })), showHint && (_jsx("span", { "aria-hidden": true, children: _jsx(Kbd, { size: "xs", children: shortcut }) }))] }))] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 export default Search;

package/dist/esm/Components/SideBar/SecondaryBar.js

@@ -4,6 +4,7 @@ import { Box, Flex, Icon, VStack, Badge, Popover, PopoverTrigger, PopoverContent
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { sidebarFocusStyles } from "./sidebarFocus.js";
 import { menuDisabled } from "./menuDisabled.js";
 import { ChevronLeft, ChevronRight, LockKeyhole } from "lucide-react";
 import OverflowTooltipText from "./components/OverflowTooltipText.js";
@@ -46,7 +47,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!blocked)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
@@ -60,7 +61,7 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
             e.preventDefault();
             if (!blocked)
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
     return item.locked && item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = SIDEBAR_ROW.fontSize, itemFontSize = SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
@@ -69,7 +70,7 @@ const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3
     const scrollContainerId = sanitizeId(useId());
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: items.map((item) => {
+    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", sx: sidebarFocusStyles(theme.colors), children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

package/dist/esm/Components/SideBar/SideBar.js

@@ -7,7 +7,8 @@ import { sanitizeId } from "./sidebarId.js";
 import { cssForScrollBar, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
 import { overlayScrimStyles } from "../../Theme/chakra/overlay.styles.js";
 import { REDUCED_MOTION_QUERY } from "../../Theme/chakra/motion.js";
-import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { sidebarFocusStyles } from "./sidebarFocus.js";
+import { MOTION_EASE, MOTION_MS } from "../../Theme/tokens/primitives/motion.js";
 import { ArrowLeftToLine, ArrowRightToLine, ChevronLeft, Maximize2, MoreVertical, PanelLeft, Plus, X } from "lucide-react";
 // Overlay stacking — mirrors theme.zIndices (overlay=1300 scrim, modal=1400 panel).
 const Z_SCRIM = 1300;
@@ -18,6 +19,18 @@ const Z_PANEL = 1400;
 const RAIL_WIDTH = "4.688rem";
 const PANEL_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
 const EXPANDED_WIDTH = "13rem";
+const COLLAPSE_MS = { ...MOTION_MS, slow: 260 };
+const NO_ACTIVE_MENU = "\u0000pinned-active";
+const inlineTransitions = (collapse) => {
+    var _a;
+    if (collapse === "none")
+        return { width: "none", shadow: "none" };
+    const ms = COLLAPSE_MS[(_a = collapse.speed) !== null && _a !== void 0 ? _a : "slow"];
+    return {
+        width: `width ${ms}ms ${PANEL_EASE}`,
+        shadow: collapse.animateShadow === false ? "none" : `box-shadow ${ms}ms ${MOTION_EASE}`,
+    };
+};
 const OVERLAY_WIDTH = "14.7rem";
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 import MenuItems from "./components/MenuItems.js";
@@ -25,6 +38,7 @@ import DefaultLogo from "../../Assets/defaultLogo.js";
 import OverflowTooltipText from "./components/OverflowTooltipText.js";
 import SecondaryBar from "./SecondaryBar.js";
 import OtherApps from "./components/OtherApps.js";
+import PinnedSection from "./components/PinnedSection.js";
 import { SIDEBAR_CHROME, SIDEBAR_ROW } from "./sidebarScale.js";
 import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
@@ -41,6 +55,7 @@ const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading,
         // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
         bg: theme.colors.sidebar.activeBg, color: activeAccent.label, borderRadius: "lg", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: _jsx(DefaultLogo, {}) }));
     return (_jsxs(Flex, { h: HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && (_jsxs(Box, { flex: "1", minW: 0, children: [_jsx(OverflowTooltipText, { placement: "right", fontWeight: 600, fontSize: SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && (_jsx(Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+                    ...sidebarFocusStyles(theme.colors),
                     "&::after": {
                         content: '""',
                         position: "absolute",
@@ -59,7 +74,7 @@ const SkeletonMenuRow = ({ toggle }) => {
 const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
-    return (_jsxs(Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: onClick, children: [_jsx(Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: _jsx(Plus, { size: 16, color: activeAccent.icon }) }), !toggle && (_jsx(Text, { fontSize: SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
+    return (_jsxs(Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), onClick: onClick, children: [_jsx(Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: _jsx(Plus, { size: 16, color: activeAccent.icon }) }), !toggle && (_jsx(Text, { fontSize: SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -77,13 +92,13 @@ const UserFooter = ({ user, toggle, overlay }) => {
     const avatar = user.avatarUrl ? (_jsx(Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : (_jsx(Box, { boxSize: "26px", borderRadius: "full", 
         // Same rail-safe pairing as the logo tile — primary.opacity[32] was invisible on zinc/skyline.
         bg: theme.colors.sidebar.activeBg, color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: _jsxs(Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", children: [avatar, !toggle && (_jsxs(Box, { flex: "1", minW: 0, textAlign: "left", children: [_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && _jsx(MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
+    return (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: _jsxs(Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [avatar, !toggle && (_jsxs(Box, { flex: "1", minW: 0, textAlign: "left", children: [_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && _jsx(MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
 };
 // Footer "cell" — one segment of the Collapse | Hide/Show control.
 const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
-    return (_jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", children: [children, label && (_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: "medium", children: label }))] }));
+    return (_jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", sx: sidebarFocusStyles(theme.colors), children: [children, label && (_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: "medium", children: label }))] }));
 };
 // Collapse (mini-rail) sits next to the Hide/Show navbar-mode toggle. In the
 // desktop mobile-nav overlay only "Show" (return to the docked sidebar) is shown;
@@ -102,7 +117,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
     return shell(_jsxs(_Fragment, { children: [_jsx(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? (_jsx(ArrowRightToLine, { size: 14, color: iconColor })) : (_jsx(ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && (_jsx(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: _jsx(Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
-export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, }) {
+export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, pinnedItems, pinnedLabel, onUnpin, activePinnedId, pinnedLimit, pinnedLabels, collapseTransition = { speed: "slow" }, autoCollapse = true, }) {
     var _a, _b;
     const theme = useCustomTheme();
     const scrollContainerId = sanitizeId(useId());
@@ -142,20 +157,24 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
     const activeTop = menus.find((m) => String(m.title) === String(activeMenu)) ||
         menus.find((m) => String(m.id) === String(activeMenu));
     const secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
+    const inline = inlineTransitions(collapseTransition);
+    const pinnedActive = activePinnedId != null && !!(pinnedItems === null || pinnedItems === void 0 ? void 0 : pinnedItems.some((p) => String(p.id) === String(activePinnedId)));
     // Sync toggle with external `open` prop.
     // `open=false` → collapsed (toggle=true); `open=true` → expanded (toggle=false).
     useEffect(() => {
+        if (!autoCollapse)
+            return;
         const shouldBeCollapsed = !open;
         if (shouldBeCollapsed !== toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [open]);
+    }, [open, autoCollapse]);
     // Auto-collapse the main sidebar whenever a secondary panel is active.
     useEffect(() => {
-        if (secondaryItems.length > 0 && !toggleRef.current) {
+        if (autoCollapse && secondaryItems.length > 0 && !toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [secondaryItems.length]);
+    }, [secondaryItems.length, autoCollapse]);
     // Esc closes the overlay.
     useEffect(() => {
         if (!isOverlayOpen)
@@ -257,12 +276,14 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
                         base: dragging
                             ? "none"
                             : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)",
-                        lg: transitionFor(["box-shadow"], "base"),
+                        lg: inline.shadow,
                     }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: theme.colors.sidebar.divider, role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: {
                     ...fullViewportHeight,
                     touchAction: overlay ? "pan-y" : "auto",
                     [REDUCED_MOTION_QUERY]: { "&, & *": { transition: "none", animation: "none" } },
                 }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsx(Box, { width: mobileNav
                             ? OVERLAY_WIDTH
-                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: `width 0.26s ${PANEL_EASE}`, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: _jsxs(Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [_jsx(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => (_jsx(SkeletonMenuRow, { toggle: effToggle }, i)))) : (_jsx(MenuItems, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, overlay: overlay, containerId: scrollContainerId })) }), _jsxs(Box, { flexShrink: 0, children: [!isDisableAddNew && (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: _jsx(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), _jsx(OtherApps, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && _jsx(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), _jsx(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && (_jsx(SecondaryBar, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && (_jsx(Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
+                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: mobileNav
+                            ? `width 0.26s ${PANEL_EASE}`
+                            : { base: `width 0.26s ${PANEL_EASE}`, lg: inline.width }, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: _jsxs(Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [_jsx(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => (_jsx(SkeletonMenuRow, { toggle: effToggle }, i)))) : (_jsxs(_Fragment, { children: [pinnedItems && pinnedItems.length > 0 && (_jsx(PinnedSection, { items: pinnedItems, label: pinnedLabel, limit: pinnedLimit, toggle: effToggle, overlay: overlay, activeId: activePinnedId, labels: pinnedLabels, onItemClick: handleMenuClickInternal, onUnpin: onUnpin })), _jsx(MenuItems, { activeMenu: pinnedActive ? NO_ACTIVE_MENU : activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, overlay: overlay, containerId: scrollContainerId })] })) }), _jsxs(Box, { flexShrink: 0, children: [!isDisableAddNew && (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: _jsx(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), _jsx(OtherApps, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && _jsx(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), _jsx(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && (_jsx(SecondaryBar, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && (_jsx(Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
 }