@endora-commerce/admin-shell 0.107.0 → 0.109.0

package/dist/components/AppShell.js

@@ -1,30 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useFocusTrap } from './hooks/useFocusTrap.js';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useFocusTrap, useViewportTier } from '@endora-commerce/admin-kit/components';
 import { BrandLogo } from './BrandLogo.js';
 import { VersionBadge } from './VersionBadge.js';
+import { AdminFeedback } from './AdminFeedback.js';
 import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
-import { BookOpen, Boxes, ChevronDown, ChevronRight, HelpCircle, Home as HomeIcon, Menu, LayoutDashboard, LogOut, PanelLeftClose, PanelLeftOpen, Search, Sparkles, } from 'lucide-react';
-import { useAuth } from '../lib/auth.js';
-import { cn } from '../lib/utils.js';
-import { useTranslation } from '../i18n/useTranslation.js';
-import { useTranslationContext } from '../i18n/TranslationProvider.js';
+import { BookOpen, Boxes, ChevronDown, ChevronRight, HelpCircle, Home as HomeIcon, Menu, LayoutDashboard, LogOut, PanelLeftClose, PanelLeftOpen, Pin, PinOff, Search, Sparkles, } from 'lucide-react';
+import { useAuth, cn, useModulePresence, useSurfaceVisibility, resolveIcon, useAdminPreference, } from '@endora-commerce/admin-kit/lib';
+import { useTranslation, useTranslationContext } from '@endora-commerce/admin-kit/i18n';
 import { registryNavFor, useAdminRegistry, } from '../lib/module-registry/index.js';
 import { LanguagePicker } from './LanguagePicker.js';
 import { RoleRequiredNotice } from './RoleRequiredNotice.js';
-import { useViewportTier } from './hooks/useViewportTier.js';
 import { NotificationBell } from './notifications/index.js';
 import { useAdminActions } from '../lib/admin-actions/useAdminActions.js';
-import { normalize } from '../lib/text-normalization.js';
-import { useModulePresence } from '../lib/module-presence/index.js';
+import { matchesSearchTerms, searchTerms } from '../lib/palette-match.js';
 import { usePlatformVersion } from '../lib/platform-info/usePlatformVersion.js';
-import { useSurfaceVisibility, } from '../lib/surface-visibility.js';
-import { resolveIcon } from '../lib/admin-actions/icon-map.js';
 import { getPromptCapability, listUnseenPromptRequests } from '../lib/prompt-actions/api.js';
 import { PromptModePanel } from './prompt-actions/PromptModePanel.js';
 import { useGlobalSearch } from '../lib/global-search/useGlobalSearch.js';
-import { Badge } from './ui/badge.js';
+import { Badge } from '@endora-commerce/admin-kit/ui';
 import { SpeechToTextButton } from './SpeechToTextButton.js';
+import { PinnedSection } from './sidebar/PinnedSection.js';
+import { PinToggleButton } from './sidebar/PinToggleButton.js';
+import { PreferencesSaveNotice } from './sidebar/PreferencesSaveNotice.js';
+import { usePinActions } from './sidebar/use-pin-actions.js';
+import { reorderVisiblePins, resolvePinsFrom, visibleDestinations, } from '../lib/pinned-entries.js';
 /* Design-aligned navigation. The "Home" + "Orders" cluster sits above
  * the first labelled group exactly as the prototype shows. */
 const NAV = [
@@ -73,6 +73,16 @@ const NAV = [
         labelKey: 'appShell.section.crm',
         items: [],
     },
+    {
+        // The "Projects & tasks" group (`specs/163-projects-and-tasks/` research
+        // R-16). It holds no host-declared row: every entry is the `projects` or
+        // the `tasks` module's contribution, each gated by its own module's
+        // permission, so the heading shows only Tasks entries while `projects` is
+        // off and disappears when both modules are.
+        key: 'work',
+        labelKey: 'appShell.section.work',
+        items: [],
+    },
     {
         key: 'catalog',
         labelKey: 'appShell.section.catalog',
@@ -318,61 +328,6 @@ const NAV = [
         ],
     },
 ];
-const STORAGE_KEY = 'b2b-admin.nav.collapsed-groups';
-const RAIL_STORAGE_KEY = 'b2b-admin.nav.rail-mode';
-/**
- * Rail (icon-only) mode persistence. The whole sidebar shrinks to a
- * 64px-wide column showing just icons; section labels disappear and
- * each section becomes a single icon (the first item's icon). Hovering
- * or clicking the icon reveals a popover with the section's items.
- */
-function loadRailMode() {
-    if (typeof window === 'undefined')
-        return false;
-    try {
-        return window.localStorage.getItem(RAIL_STORAGE_KEY) === '1';
-    }
-    catch {
-        return false;
-    }
-}
-function persistRailMode(value) {
-    if (typeof window === 'undefined')
-        return;
-    try {
-        window.localStorage.setItem(RAIL_STORAGE_KEY, value ? '1' : '0');
-    }
-    catch {
-        /* ignore */
-    }
-}
-function loadCollapsed() {
-    if (typeof window === 'undefined')
-        return new Set();
-    try {
-        const raw = window.localStorage.getItem(STORAGE_KEY);
-        if (!raw)
-            return new Set();
-        const parsed = JSON.parse(raw);
-        if (Array.isArray(parsed)) {
-            return new Set(parsed.filter((v) => typeof v === 'string'));
-        }
-    }
-    catch {
-        /* ignore */
-    }
-    return new Set();
-}
-function persistCollapsed(value) {
-    if (typeof window === 'undefined')
-        return;
-    try {
-        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(value)));
-    }
-    catch {
-        /* ignore */
-    }
-}
 const CRUMB_DICT = [
     { test: /^\/$/, build: () => [{ labelKey: 'appShell.nav.home', href: null }] },
     // Six hand-written `/catalog*` trails stood here until feature 091's Phase 4
@@ -672,13 +627,19 @@ function buildCrumbs(pathname, composedNav) {
  * does type `zamówienia`; folding only the query breaks the one who does not.
  * (Postel's Law — accept what was typed and normalise it.)
  *
- * `needle` must already be normalised; the caller folds the query once per
- * keystroke rather than once per row. `normalize` trims, so a query with a
+ * **Per word, across the row** — every word of the query must occur in some
+ * field, not the whole query in one. The rule itself is `lib/palette-match.ts`,
+ * shared with the Actions group for the same reason as the fold: a multi-word
+ * query such as `kanał sprzedaży` used to need one field carrying those words
+ * contiguously, so it missed `Kanały sprzedaży`.
+ *
+ * `terms` must already be folded by `searchTerms`; the caller does that once
+ * per keystroke rather than once per row. `normalize` trims, so a query with a
  * leading space matches what the operator meant rather than nothing at all
  * (issue #236).
  */
-function matchesQuery(needle, ...haystacks) {
-    return haystacks.some((haystack) => normalize(haystack).includes(needle));
+function matchesQuery(terms, ...haystacks) {
+    return matchesSearchTerms(terms, haystacks);
 }
 /**
  * The static Navigate group.
@@ -878,8 +839,12 @@ function useNavLabel() {
     const { t } = useTranslationContext();
     return useCallback((item) => t(item.labelScope ?? 'core', item.labelKey), [t]);
 }
+/** The sentence the pin and unpin live regions say, in the admin's language (FR-005). */
+function pinAnnouncementText(t, outcome, label) {
+    return t(outcome === 'pinned' ? 'appShell.pinned.announce.pinned' : 'appShell.pinned.announce.unpinned', { label });
+}
 export function AppShell() {
-    const { me, logout, hasPermission } = useAuth();
+    const { me, logout } = useAuth();
     // The host's nav with every installed module's contributed entry folded in.
     const composedNav = useComposedNav();
     // Feature 073 — the effective enabled-set. A module that is off contributes
@@ -889,22 +854,26 @@ export function AppShell() {
     const isVisible = useSurfaceVisibility();
     const navigate = useNavigate();
     const location = useLocation();
-    const [collapsed, setCollapsed] = useState(() => loadCollapsed());
-    const [railMode, setRailMode] = useState(() => loadRailMode());
+    // Feature 164 — folded groups and rail mode are the admin's, kept on the
+    // server and present in the first render (FR-013, FR-016). A stored group key
+    // this release does not render folds nothing and is kept in the next write
+    // (FR-015).
+    const [collapsedGroups, setCollapsedGroups] = useAdminPreference('sidebarCollapsedGroups');
+    const collapsed = useMemo(() => new Set(collapsedGroups), [collapsedGroups]);
+    const [storedRailMode, setStoredRailMode] = useAdminPreference('sidebarRailMode');
     const platformVersion = usePlatformVersion();
+    const feedbackOffered = isModulePresent('admin_feedback');
     const [paletteOpen, setPaletteOpen] = useState(false);
     const [navDrawerOpen, setNavDrawerOpen] = useState(false);
     const sidebarRef = useRef(null);
     const viewportTier = useViewportTier();
     const isMobile = viewportTier === 'mobile';
     useFocusTrap(sidebarRef, isMobile && navDrawerOpen);
+    // Rail mode has no effect on the mobile tier, whatever is stored (FR-013).
+    const railMode = storedRailMode && !isMobile;
     const toggleRailMode = useCallback(() => {
-        setRailMode((prev) => {
-            const next = !prev;
-            persistRailMode(next);
-            return next;
-        });
-    }, []);
+        setStoredRailMode(!storedRailMode);
+    }, [storedRailMode, setStoredRailMode]);
     const t = useTranslation('core');
     // The brand link's tooltip. With a release known it is the full sentence in
     // either mode: collapsed, the badge has no room and this is the only place
@@ -923,19 +892,27 @@ export function AppShell() {
     // The raw, scope-taking resolver, for the breadcrumb: a crumb a module
     // contributed resolves its label in that module's own namespace.
     const { t: tScoped } = useTranslationContext();
+    // Feature 164 — the sidebar's visible destinations, built once with the same
+    // predicate the sections render with and read by both the Pinned section and
+    // the palette's pin control (research R-7, R-15): a pin is the original
+    // entry's own object, so it cannot show a surface its original would not.
+    const pinTargets = useMemo(() => visibleDestinations(composedNav, isVisible), [composedNav, isVisible]);
+    const { pins, isPinned, toggle: togglePin, setPins } = usePinActions();
+    const resolvedPins = useMemo(() => resolvePinsFrom(pins, pinTargets), [pins, pinTargets]);
+    // One polite region for every pin and unpin in the sidebar (FR-005), mounted
+    // empty and outside the sidebar, which the closed drawer hides from AT.
+    const [pinAnnouncement, setPinAnnouncement] = useState('');
+    const togglePinOf = useCallback((item) => {
+        const outcome = togglePin(item.to);
+        setPinAnnouncement(pinAnnouncementText(t, outcome, navLabel(item)));
+    }, [togglePin, t, navLabel]);
     const fullName = me ? `${me.adminUser.firstName} ${me.adminUser.lastName}`.trim() : '';
     const role = me?.role?.name ?? 'Admin';
     const toggleSection = useCallback((key) => {
-        setCollapsed((prev) => {
-            const next = new Set(prev);
-            if (next.has(key))
-                next.delete(key);
-            else
-                next.add(key);
-            persistCollapsed(next);
-            return next;
-        });
-    }, []);
+        setCollapsedGroups(collapsedGroups.includes(key)
+            ? collapsedGroups.filter((group) => group !== key)
+            : [...collapsedGroups, key]);
+    }, [collapsedGroups, setCollapsedGroups]);
     // ⌘K opens the palette anywhere in the admin; ⌘B toggles the
     // sidebar rail (matches the shadcn / VS Code shortcut convention).
     useEffect(() => {
@@ -964,59 +941,70 @@ export function AppShell() {
     }, [location.pathname]);
     const crumbs = useMemo(() => buildCrumbs(location.pathname, composedNav), [location.pathname, composedNav]);
     const isCmsRoute = location.pathname.startsWith('/cms');
-    return (_jsxs("div", { className: cn('b2b-app-layout', isMobile ? null : railMode ? 'b2b-app-layout--rail' : 'b2b-app-layout--expanded'), children: [isMobile && navDrawerOpen ? (_jsx("button", { type: "button", className: "b2b-nav-drawer-backdrop", "aria-label": t('appShell.mobileMenu.close'), onClick: () => setNavDrawerOpen(false) })) : null, _jsxs("aside", { ref: sidebarRef, className: cn('b2b-sidebar', railMode && !isMobile && 'b2b-sidebar--rail', isMobile && navDrawerOpen && 'b2b-sidebar--drawer-open'), "aria-hidden": isMobile && !navDrawerOpen ? true : undefined, role: "navigation", "aria-label": t('appShell.mobileMenu.title'), children: [_jsxs(NavLink, { to: "/", end: true, className: "b2b-sidebar__brand", style: { textDecoration: 'none', color: 'inherit', cursor: 'pointer' }, "aria-label": t('appShell.brand.dashboardLink'), title: brandTooltip, children: [_jsx("span", { className: "b2b-sidebar__brand-logo", children: _jsx(BrandLogo, { label: t('appShell.brand.text') }) }), _jsxs("span", { className: "b2b-sidebar__brand-text", children: [t('appShell.brand.textPrimary'), ' ', _jsx("span", { className: "b2b-sidebar__brand-text-accent", children: t('appShell.brand.textAccent') })] })] }), platformVersion !== null ? (_jsx("div", { className: "b2b-sidebar__version", children: _jsx(VersionBadge, { version: platformVersion }) })) : null, _jsx("div", { className: "b2b-sidebar__search", children: railMode ? (_jsx("button", { type: "button", className: "b2b-sidebar__search-rail", onClick: () => setPaletteOpen(true), title: t('appShell.search.openPalette'), "aria-label": t('appShell.search.openPalette'), children: _jsx(Search, { size: 16 }) })) : (_jsxs(_Fragment, { children: [_jsx(Search, { size: 14, className: "b2b-sidebar__search-icon" }), _jsx("input", { className: "b2b-sidebar__search-input", placeholder: t('appShell.search.placeholder'), readOnly: true, onClick: () => setPaletteOpen(true), onFocus: () => setPaletteOpen(true) }), _jsx("span", { className: "b2b-sidebar__search-kbd", children: t('appShell.search.shortcutSymbol') })] })) }), _jsx("nav", { className: "b2b-sidebar__nav", children: composedNav.map((section) => {
-                            const isOpen = !collapsed.has(section.key);
-                            // Permission-gate every entry, then presence-gate it (feature 073 /
-                            // FR-031). Sections with no remaining visible items fold away
-                            // entirely, which is what makes a whole domain disappear when every
-                            // module in it is off — the same behaviour restricted admins have
-                            // always had.
-                            //
-                            // Issue #230 — the predicate is `isSurfaceVisible`, shared with the
-                            // command palette and the dashboard quick actions. The palette used
-                            // to run a second, weaker copy of it; a shared helper is what stops
-                            // the three from disagreeing again.
-                            const visibleItems = section.items.filter(isVisible);
-                            if (visibleItems.length === 0)
-                                return null;
-                            // Feature 019 / 021 — section labels go through useTranslation('core').
-                            // The empty-labelKey "main" cluster keeps no label; every other
-                            // group resolves its declared `labelKey`. Polish strings live
-                            // in packages/modules/_i18n/i18n/pl.json under the same key.
-                            const translatedLabel = section.labelKey ? t(section.labelKey) : '';
-                            // In rail mode the section reduces to one icon (the first
-                            // visible item's icon). Hover or click reveals a popover
-                            // listing every visible item in the section.
-                            if (railMode) {
-                                return (_jsx(RailSection, { section: section, visibleItems: visibleItems, translatedLabel: translatedLabel }, section.key));
-                            }
-                            return (_jsxs("div", { className: cn('b2b-sidebar__group', !isOpen && section.labelKey && 'b2b-sidebar__group--collapsed'), children: [section.labelKey ? (_jsxs("button", { type: "button", className: "b2b-sidebar__group-label", onClick: () => toggleSection(section.key), children: [_jsx(ChevronDown, { size: 11 }), _jsx("span", { children: translatedLabel })] })) : null, _jsx("div", { className: "b2b-sidebar__items", children: visibleItems.map((item) => {
-                                            const Icon = item.icon;
-                                            // Force exact-match (`end`) when another item in the same
-                                            // section nests under this item's path. Without this, a
-                                            // parent route like `/inventory` lights up alongside its
-                                            // children (`/inventory/low-stock`, `/inventory/import`,
-                                            // …) because NavLink's default match is prefix-based.
-                                            // The home link (`/`) is the canonical example and is
-                                            // covered by the same rule (every other item starts with
-                                            // `/`).
-                                            const hasNestedSibling = section.items.some((other) => other !== item &&
-                                                other.to.startsWith(item.to === '/' ? '/' : `${item.to}/`));
-                                            return (_jsxs(NavLink, { to: item.to, end: item.to === '/' || hasNestedSibling, className: ({ isActive }) => cn('b2b-nav-item', isActive && 'is-active'), children: [_jsx(Icon, { size: 16 }), _jsx("span", { style: { flex: 1 }, children: navLabel(item) })] }, item.to));
-                                        }) })] }, section.key));
-                        }) }), me ? (_jsxs("div", { className: "b2b-sidebar__foot", children: [_jsxs(NavLink, { to: "/profile", className: "b2b-sidebar__foot-identity", title: railMode
+    return (_jsxs("div", { className: cn('b2b-app-layout', isMobile ? null : railMode ? 'b2b-app-layout--rail' : 'b2b-app-layout--expanded'), children: [isMobile && navDrawerOpen ? (_jsx("button", { type: "button", className: "b2b-nav-drawer-backdrop", "aria-label": t('appShell.mobileMenu.close'), onClick: () => setNavDrawerOpen(false) })) : null, _jsxs("aside", { ref: sidebarRef, className: cn('b2b-sidebar', railMode && 'b2b-sidebar--rail', isMobile && navDrawerOpen && 'b2b-sidebar--drawer-open'), "aria-hidden": isMobile && !navDrawerOpen ? true : undefined, role: "navigation", "aria-label": t('appShell.mobileMenu.title'), children: [_jsxs(NavLink, { to: "/", end: true, className: "b2b-sidebar__brand", style: { textDecoration: 'none', color: 'inherit', cursor: 'pointer' }, "aria-label": t('appShell.brand.dashboardLink'), title: brandTooltip, children: [_jsx("span", { className: "b2b-sidebar__brand-logo", children: _jsx(BrandLogo, { label: t('appShell.brand.text') }) }), _jsxs("span", { className: "b2b-sidebar__brand-text", children: [t('appShell.brand.textPrimary'), ' ', _jsx("span", { className: "b2b-sidebar__brand-text-accent", children: t('appShell.brand.textAccent') })] })] }), platformVersion !== null || feedbackOffered ? (_jsxs("div", { className: "b2b-sidebar__version", children: [platformVersion !== null ? _jsx(VersionBadge, { version: platformVersion }) : null, feedbackOffered && !railMode ? _jsx(AdminFeedback, { rail: false }) : null] })) : null, feedbackOffered && railMode ? (_jsx("div", { className: "b2b-sidebar__feedback-rail-row", children: _jsx(AdminFeedback, { rail: true }) })) : null, _jsx("div", { className: "b2b-sidebar__search", children: railMode ? (_jsx("button", { type: "button", className: "b2b-sidebar__search-rail", onClick: () => setPaletteOpen(true), title: t('appShell.search.openPalette'), "aria-label": t('appShell.search.openPalette'), children: _jsx(Search, { size: 16 }) })) : (_jsxs(_Fragment, { children: [_jsx(Search, { size: 14, className: "b2b-sidebar__search-icon" }), _jsx("input", { className: "b2b-sidebar__search-input", placeholder: t('appShell.search.placeholder'), readOnly: true, onClick: () => setPaletteOpen(true), onFocus: () => setPaletteOpen(true) }), _jsx("span", { className: "b2b-sidebar__search-kbd", children: t('appShell.search.shortcutSymbol') })] })) }), _jsxs("nav", { className: "b2b-sidebar__nav", children: [railMode ? (resolvedPins.length > 0 ? (_jsx(RailSection, { section: {
+                                    key: 'pinned',
+                                    labelKey: 'appShell.pinned.heading',
+                                    items: resolvedPins.map((pin) => pin.item),
+                                }, visibleItems: resolvedPins.map((pin) => pin.item), translatedLabel: t('appShell.pinned.heading'), pinned: {
+                                    icon: Pin,
+                                    endOf: (item) => resolvedPins.find((pin) => pin.item === item)?.end ?? false,
+                                    onUnpin: togglePinOf,
+                                } }, "pinned")) : null) : (_jsx(PinnedSection, { pins: resolvedPins, sections: composedNav, collapsed: collapsed.has('pinned'), onToggleCollapsed: toggleSection, onUnpin: (pin) => togglePinOf(pin.item), onReorder: (visibleOrder) => setPins(reorderVisiblePins(pins, visibleOrder)), navLabel: navLabel, touch: isMobile })), composedNav.map((section) => {
+                                const isOpen = !collapsed.has(section.key);
+                                // Permission-gate every entry, then presence-gate it (feature 073 /
+                                // FR-031). Sections with no remaining visible items fold away
+                                // entirely, which is what makes a whole domain disappear when every
+                                // module in it is off — the same behaviour restricted admins have
+                                // always had.
+                                //
+                                // Issue #230 — the predicate is `isSurfaceVisible`, shared with the
+                                // command palette and the dashboard quick actions. The palette used
+                                // to run a second, weaker copy of it; a shared helper is what stops
+                                // the three from disagreeing again.
+                                const visibleItems = section.items.filter(isVisible);
+                                if (visibleItems.length === 0)
+                                    return null;
+                                // Feature 019 / 021 — section labels go through useTranslation('core').
+                                // The empty-labelKey "main" cluster keeps no label; every other
+                                // group resolves its declared `labelKey`. Polish strings live
+                                // in packages/modules/_i18n/i18n/pl.json under the same key.
+                                const translatedLabel = section.labelKey ? t(section.labelKey) : '';
+                                // In rail mode the section reduces to one icon (the first
+                                // visible item's icon). Hover or click reveals a popover
+                                // listing every visible item in the section.
+                                if (railMode) {
+                                    return (_jsx(RailSection, { section: section, visibleItems: visibleItems, translatedLabel: translatedLabel }, section.key));
+                                }
+                                return (_jsxs("div", { className: cn('b2b-sidebar__group', !isOpen && section.labelKey && 'b2b-sidebar__group--collapsed'), children: [section.labelKey ? (_jsxs("button", { type: "button", className: "b2b-sidebar__group-label", onClick: () => toggleSection(section.key), children: [_jsx(ChevronDown, { size: 11 }), _jsx("span", { children: translatedLabel })] })) : null, _jsx("div", { className: "b2b-sidebar__items", children: visibleItems.map((item) => {
+                                                const Icon = item.icon;
+                                                // Force exact-match (`end`) when another item in the same
+                                                // section nests under this item's path. Without this, a
+                                                // parent route like `/inventory` lights up alongside its
+                                                // children (`/inventory/low-stock`, `/inventory/import`,
+                                                // …) because NavLink's default match is prefix-based.
+                                                // The home link (`/`) is the canonical example and is
+                                                // covered by the same rule (every other item starts with
+                                                // `/`).
+                                                const hasNestedSibling = section.items.some((other) => other !== item &&
+                                                    other.to.startsWith(item.to === '/' ? '/' : `${item.to}/`));
+                                                const label = navLabel(item);
+                                                // Feature 164 — the pin control is the row's second Tab
+                                                // stop, after the link and never inside it (FR-004).
+                                                return (_jsxs("div", { className: "b2b-nav-row", children: [_jsxs(NavLink, { to: item.to, end: item.to === '/' || hasNestedSibling, className: ({ isActive }) => cn('b2b-nav-item', isActive && 'is-active'), children: [_jsx(Icon, { size: 16 }), _jsx("span", { style: { flex: 1 }, children: label })] }), _jsx(PinToggleButton, { label: label, pinned: isPinned(item.to), touch: isMobile, onToggle: () => togglePinOf(item) })] }, item.to));
+                                            }) })] }, section.key));
+                            })] }), me ? (_jsxs("div", { className: "b2b-sidebar__foot", children: [_jsxs(NavLink, { to: "/profile", className: "b2b-sidebar__foot-identity", title: railMode
                                     ? `${fullName || me.adminUser.email} — ${t('appShell.profileMenu.profile')}`
                                     : t('appShell.profileMenu.profile'), "aria-label": t('appShell.profileMenu.profile'), children: [_jsx("div", { className: "b2b-avatar", children: (fullName || me.adminUser.email).slice(0, 2).toUpperCase() }), _jsxs("div", { className: "meta", children: [_jsx("div", { className: "name", children: fullName || me.adminUser.email }), _jsx("div", { className: "role", children: role })] })] }), _jsx("button", { type: "button", className: "icon-btn", title: t('appShell.profileMenu.signOut'), "aria-label": t('appShell.profileMenu.signOut'), onClick: () => void logout(), children: _jsx(LogOut, { size: 14 }) })] })) : null, !isMobile ? (_jsxs("button", { type: "button", className: "b2b-sidebar__rail-toggle", onClick: toggleRailMode, title: railMode
                             ? (t('appShell.sidebarToggle.expand') || 'Expand sidebar (⌘B)')
                             : (t('appShell.sidebarToggle.collapse') || 'Collapse sidebar (⌘B)'), "aria-label": railMode
                             ? (t('appShell.sidebarToggle.expand') || 'Expand sidebar')
-                            : (t('appShell.sidebarToggle.collapse') || 'Collapse sidebar'), "aria-pressed": railMode, children: [railMode ? _jsx(PanelLeftOpen, { size: 14 }) : _jsx(PanelLeftClose, { size: 14 }), !railMode ? (_jsx("span", { className: "b2b-sidebar__rail-toggle-label", children: t('appShell.sidebarToggle.collapse') || 'Collapse' })) : null] })) : null] }), _jsxs("div", { style: { minWidth: 0, display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "b2b-topbar", children: [isMobile ? (_jsx("button", { type: "button", className: "b2b-topbar__menu-btn", "aria-label": t('appShell.mobileMenu.open'), "aria-expanded": navDrawerOpen, onClick: () => setNavDrawerOpen((open) => !open), children: _jsx(Menu, { size: 20 }) })) : null, _jsx("div", { className: isCmsRoute ? 'b2b-topbar__crumbs-inner b2b-page b2b-page--wide' : 'b2b-topbar__crumbs', children: crumbs.map((c, i) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, children: [i > 0 ? _jsx(ChevronRight, { size: 12, className: "crumb-sep" }) : null, c.href ? (_jsx(NavLink, { to: c.href, className: "crumb-link", style: { color: 'inherit', textDecoration: 'none' }, children: c.labelKey !== undefined ? tScoped(c.labelScope ?? 'core', c.labelKey) : c.literal })) : (_jsx("span", { className: "crumb-cur", children: c.labelKey !== undefined ? tScoped(c.labelScope ?? 'core', c.labelKey) : c.literal }))] }, i))) }), _jsxs("div", { className: "b2b-topbar__actions", children: [_jsx("button", { type: "button", className: "b2b-topbar__icon-btn", title: t('appShell.search.openPalette'), "aria-label": t('appShell.search.openPalette'), onClick: () => setPaletteOpen(true), children: _jsx(Search, { size: 16 }) }), isModulePresent('admin_notifications') && hasPermission('admin:read') ? (_jsx(NotificationBell, {})) : null, _jsx("button", { type: "button", className: "b2b-topbar__icon-btn b2b-topbar__hide-mobile", title: t('appShell.topbar.help'), "aria-label": t('appShell.topbar.help'), children: _jsx(HelpCircle, { size: 16 }) }), _jsx("div", { style: { width: 1, height: 22, background: 'var(--border-color)', margin: '0 4px' } }), _jsx(LanguagePicker, {}), me ? (_jsx(NavLink, { to: "/profile", className: "b2b-avatar", title: `${fullName || me.adminUser.email} — ${t('appShell.profileMenu.profile')}`, "aria-label": t('appShell.profileMenu.profile'), style: { textDecoration: 'none', cursor: 'pointer' }, children: (fullName || me.adminUser.email).slice(0, 2).toUpperCase() })) : null] })] }), _jsxs("main", { className: "b2b-main", style: { flex: 1, overflow: 'auto' }, children: [_jsx("div", { className: "b2b-impersonation-slot", "data-impersonation-banner": true }), me !== null && me.role === null ? _jsx(RoleRequiredNotice, {}) : null, _jsx(Outlet, {})] })] }), _jsx(CommandPalette, { open: paletteOpen, onClose: () => setPaletteOpen(false), onNavigate: (to) => {
+                            : (t('appShell.sidebarToggle.collapse') || 'Collapse sidebar'), "aria-pressed": railMode, children: [railMode ? _jsx(PanelLeftOpen, { size: 14 }) : _jsx(PanelLeftClose, { size: 14 }), !railMode ? (_jsx("span", { className: "b2b-sidebar__rail-toggle-label", children: t('appShell.sidebarToggle.collapse') || 'Collapse' })) : null] })) : null] }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", "data-testid": "sidebar-pin-status", children: pinAnnouncement }), _jsxs("div", { style: { minWidth: 0, display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "b2b-topbar", children: [isMobile ? (_jsx("button", { type: "button", className: "b2b-topbar__menu-btn", "aria-label": t('appShell.mobileMenu.open'), "aria-expanded": navDrawerOpen, onClick: () => setNavDrawerOpen((open) => !open), children: _jsx(Menu, { size: 20 }) })) : null, _jsx("div", { className: isCmsRoute ? 'b2b-topbar__crumbs-inner b2b-page b2b-page--wide' : 'b2b-topbar__crumbs', children: crumbs.map((c, i) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, children: [i > 0 ? _jsx(ChevronRight, { size: 12, className: "crumb-sep" }) : null, c.href ? (_jsx(NavLink, { to: c.href, className: "crumb-link", style: { color: 'inherit', textDecoration: 'none' }, children: c.labelKey !== undefined ? tScoped(c.labelScope ?? 'core', c.labelKey) : c.literal })) : (_jsx("span", { className: "crumb-cur", children: c.labelKey !== undefined ? tScoped(c.labelScope ?? 'core', c.labelKey) : c.literal }))] }, i))) }), _jsxs("div", { className: "b2b-topbar__actions", children: [_jsx("button", { type: "button", className: "b2b-topbar__icon-btn", title: t('appShell.search.openPalette'), "aria-label": t('appShell.search.openPalette'), onClick: () => setPaletteOpen(true), children: _jsx(Search, { size: 16 }) }), isModulePresent('admin_notifications') ? (_jsx(NotificationBell, {})) : null, _jsx("button", { type: "button", className: "b2b-topbar__icon-btn b2b-topbar__hide-mobile", title: t('appShell.topbar.help'), "aria-label": t('appShell.topbar.help'), children: _jsx(HelpCircle, { size: 16 }) }), _jsx("div", { style: { width: 1, height: 22, background: 'var(--border-color)', margin: '0 4px' } }), _jsx(LanguagePicker, {}), me ? (_jsx(NavLink, { to: "/profile", className: "b2b-avatar", title: `${fullName || me.adminUser.email} — ${t('appShell.profileMenu.profile')}`, "aria-label": t('appShell.profileMenu.profile'), style: { textDecoration: 'none', cursor: 'pointer' }, children: (fullName || me.adminUser.email).slice(0, 2).toUpperCase() })) : null] })] }), _jsx(PreferencesSaveNotice, {}), _jsxs("main", { className: "b2b-main", style: { flex: 1, overflow: 'auto' }, children: [_jsx("div", { className: "b2b-impersonation-slot", "data-impersonation-banner": true }), me !== null && me.role === null ? _jsx(RoleRequiredNotice, {}) : null, _jsx(Outlet, {})] })] }), _jsx(CommandPalette, { pinTargets: pinTargets, open: paletteOpen, onClose: () => setPaletteOpen(false), onNavigate: (to) => {
                     navigate(to);
                     setPaletteOpen(false);
                 } })] }));
 }
 function RailSection(props) {
-    const { section, visibleItems, translatedLabel } = props;
+    const { section, visibleItems, translatedLabel, pinned } = props;
     const navLabel = useNavLabel();
     const [hover, setHover] = useState(false);
     const [sticky, setSticky] = useState(false);
@@ -1059,11 +1047,11 @@ function RailSection(props) {
     const railSource = visibleItems[0] ?? section.items[0];
     if (!railSource)
         return null;
-    const RailIcon = railSource.icon;
+    const RailIcon = pinned?.icon ?? railSource.icon;
     const headerLabel = translatedLabel || (visibleItems[0] ? navLabel(visibleItems[0]) : '');
     // Single-item section: render a plain link with no popover. The
     // hover area is the link itself; tooltip carries the label.
-    if (visibleItems.length === 1) {
+    if (visibleItems.length === 1 && pinned === undefined) {
         const only = visibleItems[0];
         const Icon = only.icon;
         const onlyLabel = navLabel(only);
@@ -1072,7 +1060,14 @@ function RailSection(props) {
     return (_jsxs("div", { ref: wrapperRef, className: "b2b-sidebar__rail-row", onMouseEnter: () => {
             cancelClose();
             setHover(true);
-        }, onMouseLeave: scheduleClose, children: [_jsx("button", { type: "button", className: cn('b2b-nav-item b2b-nav-item--rail', sectionActive && 'is-active', open && 'is-open'), onClick: () => setSticky((prev) => !prev), "aria-haspopup": "menu", "aria-expanded": open, "aria-label": headerLabel, title: headerLabel, children: _jsx(RailIcon, { size: 18 }) }), open ? (_jsxs("div", { className: "b2b-sidebar__rail-popover", role: "menu", children: [headerLabel ? (_jsx("div", { className: "b2b-sidebar__rail-popover-header", children: headerLabel })) : null, visibleItems.map((item) => {
+        }, onMouseLeave: scheduleClose, children: [_jsx("button", { type: "button", className: cn('b2b-nav-item b2b-nav-item--rail', sectionActive && 'is-active', open && 'is-open'), onClick: () => setSticky((prev) => !prev), ...(pinned === undefined ? { 'aria-haspopup': 'menu' } : {}), "aria-expanded": open, "aria-label": headerLabel, title: headerLabel, children: _jsx(RailIcon, { size: 18 }) }), open && pinned !== undefined ? (_jsxs("div", { className: "b2b-sidebar__rail-popover", children: [headerLabel ? (_jsx("div", { className: "b2b-sidebar__rail-popover-header", children: headerLabel })) : null, visibleItems.map((item) => {
+                        const Icon = item.icon;
+                        const label = navLabel(item);
+                        return (_jsxs("div", { className: "b2b-sidebar__rail-popover-row", children: [_jsxs(NavLink, { to: item.to, end: pinned.endOf(item), className: ({ isActive }) => cn('b2b-sidebar__rail-popover-item', isActive && 'is-active'), onClick: () => {
+                                        setSticky(false);
+                                        setHover(false);
+                                    }, children: [_jsx(Icon, { size: 14 }), _jsx("span", { children: label })] }), _jsx(PinToggleButton, { label: label, pinned: true, onToggle: () => pinned.onUnpin(item) })] }, item.to));
+                    })] })) : open ? (_jsxs("div", { className: "b2b-sidebar__rail-popover", role: "menu", children: [headerLabel ? (_jsx("div", { className: "b2b-sidebar__rail-popover-header", children: headerLabel })) : null, visibleItems.map((item) => {
                         const Icon = item.icon;
                         const hasNestedSibling = visibleItems.some((other) => other !== item &&
                             other.to.startsWith(item.to === '/' ? '/' : `${item.to}/`));
@@ -1082,6 +1077,8 @@ function RailSection(props) {
                             }, children: [_jsx(Icon, { size: 14 }), _jsx("span", { children: navLabel(item) })] }, item.to));
                     })] })) : null] }));
 }
+/** The `Alt+Enter` chord as the platform writes it (FR-027, research R-16). */
+const ALT_ENTER_GLYPH = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌥↵' : 'Alt+↵';
 /** Sentinel route for the assistant entry row — switches the palette mode
  *  instead of navigating (feature 043; module_actions are navigation-only). */
 const PROMPT_MODE_SENTINEL = '__prompt_actions_mode__';
@@ -1104,8 +1101,14 @@ export function resetPromptCapabilityCacheForTesting() {
     promptCapabilityCache = null;
 }
 function CommandPalette(props) {
-    const { open, onClose, onNavigate } = props;
+    const { open, onClose, onNavigate, pinTargets } = props;
     const t = useTranslation('core');
+    const navLabel = useNavLabel();
+    const { isPinned, toggle: togglePin } = usePinActions();
+    // The palette is `aria-modal`, so assistive technology ignores the sidebar's
+    // region while it is open: it announces in its own (research R-16).
+    const [pinAnnouncement, setPinAnnouncement] = useState('');
+    const instructionsId = useId();
     const tp = useTranslation('prompt_actions');
     const { hasPermission } = useAuth();
     const isVisible = useSurfaceVisibility();
@@ -1249,7 +1252,7 @@ function CommandPalette(props) {
         if (!query.trim())
             return [...assistantItems, ...navigateItems, ...actionItems];
         // Folded once here, then compared against every row — see `matchesQuery`.
-        const q = normalize(query);
+        const q = searchTerms(query);
         const filteredAssistant = assistantItems.filter((i) => matchesQuery(q, i.label, i.sub, i.keywords));
         // Navigate group: filter against the *translated* label + sub plus
         // the raw keywords list so a Polish user can search in Polish and
@@ -1261,6 +1264,17 @@ function CommandPalette(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, actionItems, assistantItems, navigateItems, recordItems]);
     const items = useMemo(() => (seeAllItem ? [...itemsBeforeSeeAll, seeAllItem] : itemsBeforeSeeAll), [itemsBeforeSeeAll, seeAllItem]);
+    // FR-027 — a row is pinnable when its destination **is** a visible sidebar
+    // entry's. The assistant sentinel and "see all" (a path with a query) never
+    // match a destination, so they never carry the control.
+    const pinTargetOf = useCallback((it) => it.to === PROMPT_MODE_SENTINEL ? undefined : pinTargets.get(it.to), [pinTargets]);
+    const togglePinOf = useCallback((to) => {
+        const target = pinTargets.get(to);
+        if (!target)
+            return;
+        const outcome = togglePin(to);
+        setPinAnnouncement(pinAnnouncementText(t, outcome, navLabel(target.item)));
+    }, [pinTargets, togglePin, t, navLabel]);
     // Activating the assistant row switches the palette body instead of
     // navigating (feature 043); everything else keeps the navigation path.
     const activate = useCallback((to) => {
@@ -1290,6 +1304,7 @@ function CommandPalette(props) {
     }, [query, open]);
     useEffect(() => {
         if (!open) {
+            setPinAnnouncement('');
             setQuery('');
             setMode('search');
             setInitialRequest(undefined);
@@ -1321,6 +1336,14 @@ function CommandPalette(props) {
                 e.preventDefault();
                 setCursor((c) => Math.max(0, c - 1));
             }
+            else if (e.key === 'Enter' && e.altKey) {
+                // Feature 164, FR-027 — `Alt+Enter` (⌥↵) pins or unpins the highlighted
+                // row and never navigates; focus stays in the input.
+                e.preventDefault();
+                const it = items[cursor];
+                if (it && pinTargetOf(it))
+                    togglePinOf(it.to);
+            }
             else if (e.key === 'Enter') {
                 e.preventDefault();
                 const it = items[cursor];
@@ -1333,7 +1356,7 @@ function CommandPalette(props) {
         };
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
-    }, [open, mode, items, cursor, onClose, activate]);
+    }, [open, mode, items, cursor, onClose, activate, pinTargetOf, togglePinOf]);
     if (!open)
         return null;
     if (mode === 'prompt') {
@@ -1356,14 +1379,27 @@ function CommandPalette(props) {
         const Icon = it.icon;
         const label = resolveLabel(it);
         const sub = resolveSub(it);
-        return (_jsxs("div", { className: cn('b2b-palette__item', i === cursor && 'is-cur'), onMouseEnter: () => setCursor(i), onClick: () => activate(it.to), children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [_jsx("div", { children: label }), sub ? _jsx("div", { style: { fontSize: 11, color: 'var(--fg-muted)' }, children: sub }) : null] }), it.badge ? _jsx(Badge, { variant: "secondary", children: it.badge }) : null, _jsx("span", { className: "meta", children: i === cursor ? _jsx("span", { className: "b2b-kbd-sm", children: "\u21B5" }) : null })] }, `${it.group}-${it.groupKey ?? ''}-${it.to}-${i}`));
+        const pinTarget = pinTargetOf(it);
+        const pinned = pinTarget !== undefined && isPinned(it.to);
+        const pinName = pinTarget === undefined
+            ? ''
+            : t(pinned ? 'appShell.pinned.unpin' : 'appShell.pinned.pin', {
+                label: navLabel(pinTarget.item),
+            });
+        return (_jsxs("div", { className: cn('b2b-palette__item', i === cursor && 'is-cur'), onMouseEnter: () => setCursor(i), onClick: () => activate(it.to), children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [_jsx("div", { children: label }), sub ? _jsx("div", { style: { fontSize: 11, color: 'var(--fg-muted)' }, children: sub }) : null] }), it.badge ? _jsx(Badge, { variant: "secondary", children: it.badge }) : null, pinTarget !== undefined && i === cursor ? (_jsxs("span", { className: "b2b-palette__pin-hint", children: [_jsx("span", { className: "b2b-kbd-sm", children: ALT_ENTER_GLYPH }), t(pinned ? 'appShell.palette.pin.hintUnpin' : 'appShell.palette.pin.hintPin')] })) : null, pinTarget !== undefined ? (_jsx("button", { type: "button", tabIndex: -1, className: "b2b-palette__pin", "aria-pressed": pinned, "aria-keyshortcuts": "Alt+Enter", "aria-label": pinName, title: pinName, 
+                    // Focus stays in the search input; the row's own activation (open
+                    // the destination) must not fire.
+                    onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+                        event.stopPropagation();
+                        togglePinOf(it.to);
+                    }, children: pinned ? _jsx(PinOff, { size: 14, "aria-hidden": "true" }) : _jsx(Pin, { size: 14, "aria-hidden": "true" }) })) : null, _jsx("span", { className: "meta", children: i === cursor ? _jsx("span", { className: "b2b-kbd-sm", children: "\u21B5" }) : null })] }, `${it.group}-${it.groupKey ?? ''}-${it.to}-${i}`));
     };
     let lastGroup = '';
     let recordIndex = firstRecordIndex;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "b2b-scrim", onClick: onClose }), _jsxs("div", { className: "b2b-palette", role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: "b2b-palette__input", children: [_jsx(Search, { size: 18, style: { color: 'var(--fg-muted)' } }), _jsx("input", { ref: inputRef, placeholder: t('appShell.search.commandPalettePlaceholder'), value: query, onChange: (e) => handleQueryChange(e.target.value) }), _jsx(SpeechToTextButton, { startTitle: t('appShell.search.voiceInput'), stopTitle: t('appShell.search.voiceInputStop'), onTranscript: (text) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "b2b-scrim", onClick: onClose }), _jsxs("div", { className: "b2b-palette", role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: "b2b-palette__input", children: [_jsx(Search, { size: 18, style: { color: 'var(--fg-muted)' } }), _jsx("input", { ref: inputRef, placeholder: t('appShell.search.commandPalettePlaceholder'), "aria-describedby": instructionsId, value: query, onChange: (e) => handleQueryChange(e.target.value) }), _jsx(SpeechToTextButton, { startTitle: t('appShell.search.voiceInput'), stopTitle: t('appShell.search.voiceInputStop'), onTranscript: (text) => {
                                     setQuery((q) => (q ? `${q} ${text}` : text));
                                     inputRef.current?.focus();
-                                } }), _jsx("span", { className: "b2b-kbd-sm", children: "esc" })] }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", "data-testid": "palette-records-status", children: showRecords && records.state === 'ready'
+                                } }), _jsx("span", { className: "b2b-kbd-sm", children: "esc" }), _jsx("span", { id: instructionsId, className: "sr-only", children: t('appShell.palette.pin.instructions') })] }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", "data-testid": "palette-pin-status", children: pinAnnouncement }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", "data-testid": "palette-records-status", children: showRecords && records.state === 'ready'
                             ? t('appShell.palette.records.announce', { count: recordCount })
                             : '' }), _jsxs("div", { className: "b2b-palette__list", "aria-busy": recordsLoading, children: [unseen.length > 0 ? (_jsxs("div", { "data-testid": "prompt-unseen-notice", className: "b2b-palette__item", style: { cursor: 'pointer' }, onClick: () => {
                                     setInitialRequest(unseen[0]);