@nsxbet/admin-sdk 0.1.0

package/dist/shell/components/CommandPalette.js

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Icon, } from "@nsxbet/admin-ui";
+import { fuzzySearch } from "../search/fuzzy";
+import { useAuth } from "../../hooks/useAuth";
+import { useI18n } from "../../hooks/useI18n";
+// Storage key for pinned commands
+const PINNED_COMMANDS_KEY = "adminPlatform.pinnedCommands";
+function parseSearch(search) {
+    const trimmed = search.trim();
+    // @term - filter modules only
+    if (trimmed.startsWith("@")) {
+        return { filter: "module", query: trimmed.slice(1).trim() };
+    }
+    // >term - filter commands only
+    if (trimmed.startsWith(">")) {
+        return { filter: "command", query: trimmed.slice(1).trim() };
+    }
+    // #category - filter by category
+    if (trimmed.startsWith("#")) {
+        return { filter: "category", query: "", categoryFilter: trimmed.slice(1).trim().toLowerCase() };
+    }
+    return { filter: "all", query: trimmed };
+}
+export function CommandPalette({ open, onOpenChange, catalog, }) {
+    const navigate = useNavigate();
+    const { hasPermission } = useAuth();
+    const { t, i18n } = useI18n();
+    const [search, setSearch] = useState("");
+    const [pinnedCommands, setPinnedCommands] = useState([]);
+    // Helper to translate module/command titles
+    // titleKey format: "namespace:key" (e.g., "tasks:module.title")
+    const translateTitle = useCallback((title, titleKey) => {
+        if (titleKey && titleKey.includes(':')) {
+            const [ns, key] = titleKey.split(':');
+            const translated = i18n.t(key, { ns, defaultValue: title });
+            return translated;
+        }
+        if (titleKey) {
+            const translated = t(titleKey, { defaultValue: title });
+            return translated;
+        }
+        return title;
+    }, [i18n, t]);
+    // Track dialog open count to reset key and force re-render
+    const [openCount, setOpenCount] = useState(0);
+    // Load pinned commands from localStorage
+    useEffect(() => {
+        try {
+            const stored = localStorage.getItem(PINNED_COMMANDS_KEY);
+            if (stored) {
+                setPinnedCommands(JSON.parse(stored));
+            }
+        }
+        catch {
+            // Ignore parse errors
+        }
+    }, [open]); // Reload when dialog opens
+    // Reset search when dialog closes
+    useEffect(() => {
+        if (!open) {
+            setSearch("");
+        }
+        else {
+            // Increment count when dialog opens to reset cmdk internal state
+            setOpenCount((c) => c + 1);
+        }
+    }, [open]);
+    // Parse search query for filters
+    const parsedSearch = useMemo(() => parseSearch(search), [search]);
+    // Build search index from catalog
+    const searchableItems = useMemo(() => {
+        if (!catalog)
+            return [];
+        const searchIndex = [];
+        // Add modules and commands (filtered by permissions)
+        for (const module of catalog.modules) {
+            // Check if user has permission to view this module
+            const viewPermissions = module.permissions?.view || [];
+            const hasAccess = viewPermissions.length === 0 ||
+                viewPermissions.some((perm) => hasPermission(perm));
+            if (!hasAccess)
+                continue;
+            // Get translated titles for search
+            const translatedModuleTitle = translateTitle(module.title, module.titleKey);
+            // Build keywords including translated title
+            const moduleKeywords = [
+                ...(module.keywords || []),
+                // Add translated title as keyword for search in current language
+                translatedModuleTitle !== module.title ? translatedModuleTitle : null,
+            ].filter((k) => k !== null);
+            // Add module itself to search index
+            searchIndex.push({
+                type: "module",
+                id: module.id,
+                title: module.title,
+                titleKey: module.titleKey,
+                category: module.category,
+                keywords: moduleKeywords,
+                description: module.description,
+                route: module.routeBase,
+                moduleId: module.id,
+                moduleTitle: module.title,
+                moduleTitleKey: module.titleKey,
+                icon: module.icon,
+            });
+            // Add commands from module with module title as context
+            if (module.commands) {
+                for (const command of module.commands) {
+                    // Get translated command title
+                    const translatedCommandTitle = translateTitle(command.title, command.titleKey);
+                    // Build keywords including translated titles
+                    const commandKeywords = [
+                        ...(command.keywords || []),
+                        module.title,
+                        `@${module.title}`,
+                        // Add translated titles as keywords for search in current language
+                        translatedCommandTitle !== command.title ? translatedCommandTitle : null,
+                        translatedModuleTitle !== module.title ? translatedModuleTitle : null,
+                        translatedModuleTitle !== module.title ? `@${translatedModuleTitle}` : null,
+                    ].filter((k) => k !== null);
+                    searchIndex.push({
+                        type: "command",
+                        id: `${module.id}:${command.id}`,
+                        title: command.title,
+                        titleKey: command.titleKey,
+                        keywords: commandKeywords,
+                        route: command.route,
+                        moduleId: module.id,
+                        moduleTitle: module.title,
+                        moduleTitleKey: module.titleKey,
+                        category: module.category,
+                        icon: command.icon,
+                    });
+                }
+            }
+        }
+        return searchIndex;
+    }, [catalog, hasPermission, translateTitle]);
+    // Perform fuzzy search with filters
+    const searchResults = useMemo(() => {
+        let items = searchableItems;
+        // Apply type filter
+        if (parsedSearch.filter === "module") {
+            items = items.filter((item) => item.type === "module");
+        }
+        else if (parsedSearch.filter === "command") {
+            items = items.filter((item) => item.type === "command");
+        }
+        else if (parsedSearch.filter === "category" && parsedSearch.categoryFilter) {
+            items = items.filter((item) => item.category?.toLowerCase().includes(parsedSearch.categoryFilter) ?? false);
+        }
+        return fuzzySearch(items, parsedSearch.query, { maxResults: 50 });
+    }, [searchableItems, parsedSearch]);
+    // Get pinned items that exist in searchable items
+    const pinnedItems = useMemo(() => {
+        if (parsedSearch.query || parsedSearch.filter !== "all")
+            return []; // Hide when searching or filtering
+        return pinnedCommands
+            .map((pinned) => {
+            const item = searchableItems.find((s) => s.type === "command" && s.id === `${pinned.moduleId}:${pinned.commandId}`);
+            if (item) {
+                return { item, score: 1, matchedFields: [] };
+            }
+            // Fallback for pinned items that might not be in catalog yet
+            return {
+                item: {
+                    type: "command",
+                    id: `${pinned.moduleId}:${pinned.commandId}`,
+                    title: pinned.title,
+                    route: pinned.route,
+                    moduleId: pinned.moduleId,
+                    moduleTitle: pinned.moduleTitle,
+                    icon: pinned.icon,
+                },
+                score: 1,
+                matchedFields: [],
+            };
+        })
+            .filter((r) => r !== null);
+    }, [pinnedCommands, searchableItems, parsedSearch]);
+    // Handle selection
+    const handleSelect = useCallback((route) => {
+        navigate(route);
+        onOpenChange(false);
+    }, [navigate, onOpenChange]);
+    // Group results by type
+    const moduleResults = searchResults.filter((r) => r.item.type === "module");
+    const commandResults = searchResults.filter((r) => r.item.type === "command");
+    // Check if a command is pinned
+    const isPinned = useCallback((itemId) => {
+        const [moduleId, commandId] = itemId.split(":");
+        return pinnedCommands.some((p) => p.moduleId === moduleId && p.commandId === commandId);
+    }, [pinnedCommands]);
+    return (_jsxs(CommandDialog, { open: open, onOpenChange: onOpenChange, "data-testid": "command-palette", children: [_jsx(CommandInput, { placeholder: t('commandPalette.placeholder'), value: search, onValueChange: setSearch, "data-testid": "command-palette-input", autoFocus: true }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: _jsxs("div", { className: "flex flex-col items-center justify-center py-6 text-center", children: [_jsx(Icon, { name: "search-x", className: "h-10 w-10 text-muted-foreground/50 mb-2" }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('commandPalette.noResults') }), _jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: "@module, >command, #category" })] }) }), pinnedItems.length > 0 && (_jsx(CommandGroup, { heading: t('nav.pinned'), children: pinnedItems.map((result) => (_jsxs(CommandItem, { onSelect: () => handleSelect(result.item.route), "data-testid": "search-result-pinned", className: "flex items-center gap-2", children: [_jsx(Icon, { name: "pin", className: "h-4 w-4 text-primary shrink-0" }), _jsx(Icon, { name: result.item.icon || "terminal", className: "h-4 w-4 text-muted-foreground shrink-0" }), _jsx("span", { className: "flex-1 truncate", children: translateTitle(result.item.title, result.item.titleKey) }), _jsxs("span", { className: "text-xs text-muted-foreground/60 shrink-0", children: ["@", translateTitle(result.item.moduleTitle || '', result.item.moduleTitleKey)] }), _jsx("kbd", { className: "pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex", children: "\u21B5" })] }, `pinned-${result.item.id}`))) })), moduleResults.length > 0 && (_jsx(CommandGroup, { heading: t('commandPalette.modules'), children: moduleResults.map((result) => (_jsxs(CommandItem, { onSelect: () => handleSelect(result.item.route), "data-testid": "search-result", className: "flex items-center gap-2", children: [_jsx(Icon, { name: result.item.icon || "folder", className: "h-4 w-4 text-muted-foreground shrink-0" }), _jsx("span", { className: "flex-1 truncate", children: translateTitle(result.item.title, result.item.titleKey) }), result.item.category && (_jsx("span", { className: "text-xs text-muted-foreground/60 shrink-0", children: result.item.category })), _jsx("kbd", { className: "pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex", children: "\u21B5" })] }, result.item.id))) })), commandResults.length > 0 && (_jsx(CommandGroup, { heading: t('commandPalette.commands'), children: commandResults.map((result) => (_jsxs(CommandItem, { onSelect: () => handleSelect(result.item.route), "data-testid": "search-result", className: "flex items-center gap-2", children: [isPinned(result.item.id) && (_jsx(Icon, { name: "pin", className: "h-3 w-3 text-primary shrink-0" })), _jsx(Icon, { name: result.item.icon || "terminal", className: "h-4 w-4 text-muted-foreground shrink-0" }), _jsx("span", { className: "flex-1 truncate", children: translateTitle(result.item.title, result.item.titleKey) }), _jsxs("span", { className: "text-xs text-muted-foreground/60 shrink-0", children: ["@", translateTitle(result.item.moduleTitle || '', result.item.moduleTitleKey)] }), _jsx("kbd", { className: "pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex", children: "\u21B5" })] }, result.item.id))) }))] })] }, `command-palette-${openCount}`));
+}

package/dist/shell/components/HomePage.d.ts

@@ -0,0 +1,2 @@
+export declare function HomePage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HomePage.d.ts.map

package/dist/shell/components/HomePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomePage.d.ts","sourceRoot":"","sources":["../../../src/shell/components/HomePage.tsx"],"names":[],"mappings":"AAoCA,wBAAgB,QAAQ,4CA+CvB"}

package/dist/shell/components/HomePage.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNavigate } from "react-router-dom";
+import { Icon, Card, CardContent } from "@nsxbet/admin-ui";
+import { useI18n } from "../../hooks/useI18n";
+const quickActions = [
+    {
+        icon: "settings",
+        titleKey: "nav.settings",
+        descriptionKey: "settingsPage.appearanceDescription",
+        route: "/_settings",
+        color: "text-blue-500",
+    },
+    {
+        icon: "user",
+        titleKey: "nav.profile",
+        descriptionKey: "profilePage.userInfo",
+        route: "/_profile",
+        color: "text-green-500",
+    },
+    {
+        icon: "package",
+        titleKey: "nav.registry",
+        descriptionKey: "registryPage.description",
+        route: "/_registry",
+        color: "text-purple-500",
+    },
+];
+export function HomePage() {
+    const navigate = useNavigate();
+    const { t } = useI18n();
+    return (_jsx("div", { className: "flex h-full items-center justify-center p-6", children: _jsxs("div", { className: "text-center max-w-2xl w-full", children: [_jsxs("div", { className: "mb-8", children: [_jsx("div", { className: "inline-flex p-4 rounded-full bg-primary/10 mb-4", children: _jsx(Icon, { name: "layout-dashboard", className: "h-12 w-12 text-primary" }) }), _jsx("h1", { className: "text-3xl font-bold mb-2", children: t('homePage.welcome') }), _jsx("p", { className: "text-muted-foreground", children: t('homePage.description') })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8", children: quickActions.map((action) => (_jsx(Card, { className: "cursor-pointer transition-all hover:shadow-md hover:border-primary/50 group", onClick: () => navigate(action.route), children: _jsxs(CardContent, { className: "p-4 flex flex-col items-center text-center", children: [_jsx("div", { className: `p-3 rounded-full bg-muted mb-3 group-hover:bg-primary/10 transition-colors`, children: _jsx(Icon, { name: action.icon, className: `h-6 w-6 ${action.color} group-hover:text-primary transition-colors` }) }), _jsx("h3", { className: "font-semibold text-sm mb-1", children: t(action.titleKey) }), _jsx("p", { className: "text-xs text-muted-foreground", children: t(action.descriptionKey) })] }) }, action.route))) }), _jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-muted-foreground", children: [_jsx(Icon, { name: "keyboard", className: "h-4 w-4" }), _jsx("span", { children: t('commandPalette.hint') })] })] }) }));
+}

package/dist/shell/components/LeftNav.d.ts

@@ -0,0 +1,7 @@
+import type { Module } from "../types";
+interface LeftNavProps {
+    modules: Module[];
+}
+export declare function LeftNav({ modules }: LeftNavProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LeftNav.d.ts.map

package/dist/shell/components/LeftNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftNav.d.ts","sourceRoot":"","sources":["../../../src/shell/components/LeftNav.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAmBvC,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,YAAY,2CAqiBhD"}

package/dist/shell/components/LeftNav.js

@@ -0,0 +1,247 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useAuth } from "../../hooks/useAuth";
+import { useAuthContext } from "../../components/AuthProvider";
+import { useI18n } from "../../hooks/useI18n";
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarHeader, SidebarFooter, SidebarTrigger, useSidebar, Collapsible, CollapsibleContent, CollapsibleTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon, ChevronRight, ChevronUp, ChevronDown, Lock, Pin, } from "@nsxbet/admin-ui";
+export function LeftNav({ modules }) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const auth = useAuth();
+    const { user, logout } = useAuthContext();
+    const { state } = useSidebar();
+    const { t, i18n } = useI18n();
+    const isCollapsed = state === "collapsed";
+    const [showPinned, setShowPinned] = useState(true);
+    const [pinnedCommands, setPinnedCommands] = useState([]);
+    // Load preferences from localStorage
+    useEffect(() => {
+        try {
+            const pinnedPref = localStorage.getItem("adminPlatform.showPinned");
+            if (pinnedPref !== null) {
+                setShowPinned(JSON.parse(pinnedPref));
+            }
+        }
+        catch {
+            // Ignore localStorage errors
+        }
+    }, []);
+    // Load pinned commands from localStorage
+    useEffect(() => {
+        const loadPinnedCommands = () => {
+            try {
+                const pinned = localStorage.getItem("adminPlatform.pinnedCommands");
+                if (pinned) {
+                    setPinnedCommands(JSON.parse(pinned));
+                }
+                else {
+                    setPinnedCommands([]);
+                }
+            }
+            catch {
+                // Ignore localStorage errors
+            }
+        };
+        // Initial load
+        loadPinnedCommands();
+        // Listen for storage events
+        const handleStorageChange = (e) => {
+            if (e.key === "adminPlatform.pinnedCommands") {
+                loadPinnedCommands();
+            }
+            else if (e.key === "adminPlatform.showPinned" && e.newValue) {
+                try {
+                    setShowPinned(JSON.parse(e.newValue));
+                }
+                catch {
+                    // Ignore parse errors
+                }
+            }
+        };
+        window.addEventListener("storage", handleStorageChange);
+        return () => window.removeEventListener("storage", handleStorageChange);
+    }, []);
+    const handleModuleClick = (module) => {
+        // Navigate to the shell-rendered overview page
+        navigate(`/_modules/${module.id}`);
+    };
+    // Helper to check if user has permission to view a module
+    const checkModulePermission = (module) => {
+        if (module.permissions.view.length === 0)
+            return true;
+        return module.permissions.view.some((perm) => auth.hasPermission(perm));
+    };
+    // Group modules by category (show all active modules, including those without permission)
+    const modulesByCategory = useMemo(() => {
+        const grouped = modules
+            .filter((m) => m.status === "active")
+            .map((module) => ({
+            ...module,
+            hasViewPermission: checkModulePermission(module),
+        }))
+            .reduce((acc, module) => {
+            const category = module.category;
+            if (!acc[category]) {
+                acc[category] = [];
+            }
+            acc[category].push(module);
+            return acc;
+        }, {});
+        // Sort modules within each category by navOrder then title
+        Object.keys(grouped).forEach((category) => {
+            grouped[category].sort((a, b) => {
+                if (a.navOrder !== undefined && b.navOrder !== undefined) {
+                    return a.navOrder - b.navOrder;
+                }
+                if (a.navOrder !== undefined)
+                    return -1;
+                if (b.navOrder !== undefined)
+                    return 1;
+                return a.title.localeCompare(b.title);
+            });
+        });
+        return grouped;
+    }, [modules, auth]);
+    // Get sorted category names
+    const categories = Object.keys(modulesByCategory).sort();
+    // Permission denied tooltip message
+    const noPermissionTooltip = t('errors.accessDeniedDescription');
+    // Check if a route is active
+    const isRouteActive = (route) => {
+        return location.pathname === route || location.pathname.startsWith(route + "/");
+    };
+    // Helper to translate module/command titles
+    // titleKey format: "namespace:key" (e.g., "tasks:module.title")
+    const translateTitle = useCallback((title, titleKey) => {
+        if (titleKey && titleKey.includes(':')) {
+            // Parse "namespace:key" format
+            const [ns, key] = titleKey.split(':');
+            // Use i18n.t with explicit namespace option
+            const translated = i18n.t(key, { ns, defaultValue: title });
+            return translated;
+        }
+        if (titleKey) {
+            // Fallback: try using the titleKey directly
+            const translated = t(titleKey, { defaultValue: title });
+            return translated;
+        }
+        return title;
+    }, [i18n, t]);
+    // Check if a command is pinned
+    const isCommandPinned = useCallback((moduleId, commandId) => {
+        return pinnedCommands.some((p) => p.moduleId === moduleId && p.commandId === commandId);
+    }, [pinnedCommands]);
+    // Toggle pin state for a command
+    const togglePin = useCallback((module, command) => {
+        const isPinned = isCommandPinned(module.id, command.id);
+        let updated;
+        if (isPinned) {
+            // Unpin
+            updated = pinnedCommands.filter((p) => !(p.moduleId === module.id && p.commandId === command.id));
+        }
+        else {
+            // Pin
+            const pinnedCommand = {
+                moduleId: module.id,
+                moduleTitle: module.title,
+                moduleTitleKey: module.titleKey,
+                moduleIcon: module.icon,
+                commandId: command.id,
+                commandTitle: command.title,
+                commandTitleKey: command.titleKey,
+                commandIcon: command.icon,
+                route: command.route,
+            };
+            updated = [...pinnedCommands, pinnedCommand];
+        }
+        setPinnedCommands(updated);
+        localStorage.setItem("adminPlatform.pinnedCommands", JSON.stringify(updated));
+        // Notify other components by dispatching a storage event
+        window.dispatchEvent(new StorageEvent("storage", {
+            key: "adminPlatform.pinnedCommands",
+            newValue: JSON.stringify(updated),
+        }));
+    }, [pinnedCommands, isCommandPinned]);
+    // Unpin a command by moduleId and commandId
+    const unpinCommand = useCallback((moduleId, commandId) => {
+        const updated = pinnedCommands.filter((p) => !(p.moduleId === moduleId && p.commandId === commandId));
+        setPinnedCommands(updated);
+        localStorage.setItem("adminPlatform.pinnedCommands", JSON.stringify(updated));
+        // Notify other components by dispatching a storage event
+        window.dispatchEvent(new StorageEvent("storage", {
+            key: "adminPlatform.pinnedCommands",
+            newValue: JSON.stringify(updated),
+        }));
+    }, [pinnedCommands]);
+    // Move a pinned item up in the list
+    const movePinnedUp = useCallback((index) => {
+        if (index <= 0)
+            return;
+        const updated = [...pinnedCommands];
+        [updated[index - 1], updated[index]] = [updated[index], updated[index - 1]];
+        setPinnedCommands(updated);
+        localStorage.setItem("adminPlatform.pinnedCommands", JSON.stringify(updated));
+        window.dispatchEvent(new StorageEvent("storage", {
+            key: "adminPlatform.pinnedCommands",
+            newValue: JSON.stringify(updated),
+        }));
+    }, [pinnedCommands]);
+    // Move a pinned item down in the list
+    const movePinnedDown = useCallback((index) => {
+        if (index >= pinnedCommands.length - 1)
+            return;
+        const updated = [...pinnedCommands];
+        [updated[index], updated[index + 1]] = [updated[index + 1], updated[index]];
+        setPinnedCommands(updated);
+        localStorage.setItem("adminPlatform.pinnedCommands", JSON.stringify(updated));
+        window.dispatchEvent(new StorageEvent("storage", {
+            key: "adminPlatform.pinnedCommands",
+            newValue: JSON.stringify(updated),
+        }));
+    }, [pinnedCommands]);
+    return (_jsxs(Sidebar, { collapsible: "icon", "data-testid": "left-nav", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(SidebarTrigger, { "data-testid": "sidebar-toggle" }) }) }) }), _jsxs(SidebarContent, { children: [showPinned && pinnedCommands.length > 0 && (_jsxs(SidebarGroup, { "data-testid": "pinned-section", children: [_jsxs(SidebarGroupLabel, { className: "text-sidebar-foreground/90 font-semibold uppercase text-[10px] tracking-wider", children: [_jsx(Pin, { className: "mr-2 h-4 w-4" }), !isCollapsed && t('nav.pinned')] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: pinnedCommands.map((pinned, index) => {
+                                        const iconName = pinned.commandIcon || pinned.moduleIcon || "file-text";
+                                        const isFirst = index === 0;
+                                        const isLast = index === pinnedCommands.length - 1;
+                                        return (_jsx(SidebarMenuItem, { className: "group/pinned", children: _jsxs("div", { className: "flex items-center w-full", children: [_jsxs(SidebarMenuButton, { onClick: () => navigate(pinned.route), isActive: isRouteActive(pinned.route), tooltip: `${translateTitle(pinned.moduleTitle, pinned.moduleTitleKey)} / ${translateTitle(pinned.commandTitle, pinned.commandTitleKey)}`, "data-testid": `pinned-${pinned.commandId}`, className: "flex-1 min-w-0", children: [_jsx(Icon, { name: iconName, className: "h-4 w-4 shrink-0" }), _jsxs("span", { className: "truncate", children: [translateTitle(pinned.moduleTitle, pinned.moduleTitleKey), " / ", translateTitle(pinned.commandTitle, pinned.commandTitleKey)] })] }), !isCollapsed && (_jsxs("div", { className: "flex items-center gap-0.5 shrink-0 pr-2 opacity-0 group-hover/pinned:opacity-100 transition-opacity", children: [!isFirst && (_jsx("button", { onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    e.preventDefault();
+                                                                    movePinnedUp(index);
+                                                                }, className: "hover:text-primary p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Move up", "data-testid": `move-up-${pinned.commandId}`, children: _jsx(ChevronUp, { className: "h-3.5 w-3.5" }) })), !isLast && (_jsx("button", { onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    e.preventDefault();
+                                                                    movePinnedDown(index);
+                                                                }, className: "hover:text-primary p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Move down", "data-testid": `move-down-${pinned.commandId}`, children: _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) })), _jsx("button", { onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    e.preventDefault();
+                                                                    unpinCommand(pinned.moduleId, pinned.commandId);
+                                                                }, className: "hover:text-destructive p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Unpin", "data-testid": `unpin-${pinned.commandId}`, children: _jsx(Pin, { className: "h-3.5 w-3.5 fill-current" }) })] }))] }) }, `${pinned.moduleId}:${pinned.commandId}`));
+                                    }) }) })] })), categories.map((category) => (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { "data-testid": `category-${category}`, className: "text-sidebar-foreground/90 font-semibold uppercase text-[10px] tracking-wider", children: category }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { "data-testid": `category-modules-${category}`, children: modulesByCategory[category].map((module) => {
+                                        const hasCommands = module.commands && module.commands.length > 0;
+                                        const isDisabled = !module.hasViewPermission;
+                                        if (!hasCommands) {
+                                            // Simple button for modules without commands
+                                            const moduleTitle = translateTitle(module.title, module.titleKey);
+                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: () => !isDisabled && handleModuleClick(module), disabled: isDisabled, tooltip: isDisabled ? noPermissionTooltip : moduleTitle, "data-testid": `module-${module.id}`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: moduleTitle }), isDisabled && _jsx(Lock, { className: "ml-auto h-3 w-3 text-muted-foreground" })] }) }, module.id));
+                                        }
+                                        // Disabled module with commands - show as non-interactive
+                                        if (isDisabled) {
+                                            const disabledModuleTitle = translateTitle(module.title, module.titleKey);
+                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { disabled: true, tooltip: noPermissionTooltip, "data-testid": `module-${module.id}`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: disabledModuleTitle }), _jsx(Lock, { className: "ml-auto h-3 w-3 text-muted-foreground" })] }) }, module.id));
+                                        }
+                                        // Module with commands - collapsible
+                                        const collapsibleModuleTitle = translateTitle(module.title, module.titleKey);
+                                        return (_jsx(Collapsible, { asChild: true, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { tooltip: collapsibleModuleTitle, "data-testid": `module-${module.id}-trigger`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: collapsibleModuleTitle }), _jsx(ChevronRight, { className: "ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsxs(SidebarMenuSub, { children: [_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { onClick: () => handleModuleClick(module), isActive: location.pathname === `/_modules/${module.id}`, "data-testid": `module-${module.id}`, children: t('nav.overview') }) }), module.commands?.map((command) => {
+                                                                    const isPinned = isCommandPinned(module.id, command.id);
+                                                                    const commandTitle = translateTitle(command.title, command.titleKey);
+                                                                    return (_jsx(SidebarMenuSubItem, { className: "group/command", children: _jsxs("div", { className: "flex items-center w-full", children: [_jsx(SidebarMenuSubButton, { onClick: () => navigate(command.route), isActive: isRouteActive(command.route), "data-testid": `command-${command.id}`, className: "flex-1 min-w-0", children: _jsx("span", { className: "truncate", children: commandTitle }) }), showPinned && (_jsx("button", { onClick: (e) => {
+                                                                                        e.stopPropagation();
+                                                                                        e.preventDefault();
+                                                                                        togglePin(module, command);
+                                                                                    }, className: `shrink-0 p-0.5 rounded mr-2 transition-opacity ${isPinned
+                                                                                        ? "text-primary hover:text-destructive hover:bg-sidebar-accent opacity-100"
+                                                                                        : "text-muted-foreground hover:text-primary hover:bg-sidebar-accent opacity-0 group-hover/command:opacity-100"}`, title: isPinned ? "Unpin" : "Pin", "data-testid": `pin-toggle-${command.id}`, children: _jsx(Pin, { className: `h-3.5 w-3.5 ${isPinned ? "fill-current" : ""}` }) }))] }) }, command.id));
+                                                                })] }) })] }) }, module.id));
+                                    }) }) })] }, category)))] }), _jsx(SidebarFooter, { className: `border-t border-sidebar-border ${isCollapsed ? "items-center" : ""}`, children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", tooltip: user?.displayName || "User", "data-testid": "user-menu-trigger", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: user?.displayName?.charAt(0).toUpperCase() || "U" }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.displayName || "User" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email || "" })] }), _jsx(ChevronUp, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { side: isCollapsed ? "right" : "top", align: isCollapsed ? "end" : "start", className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", children: [_jsxs(DropdownMenuItem, { onClick: () => navigate("/_profile"), className: isRouteActive("/_profile") ? "bg-accent" : "", "data-testid": "nav-profile", children: [_jsx(Icon, { name: "user", className: "h-4 w-4 mr-2" }), t('nav.profile')] }), _jsxs(DropdownMenuItem, { onClick: () => navigate("/_settings"), className: isRouteActive("/_settings") ? "bg-accent" : "", "data-testid": "nav-settings", children: [_jsx(Icon, { name: "settings", className: "h-4 w-4 mr-2" }), t('nav.settings')] }), _jsxs(DropdownMenuItem, { onClick: () => navigate("/_registry"), className: isRouteActive("/_registry") ? "bg-accent" : "", "data-testid": "nav-registry", children: [_jsx(Icon, { name: "package", className: "h-4 w-4 mr-2" }), t('nav.registry')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => logout(), "data-testid": "nav-logout", children: [_jsx(Icon, { name: "log-out", className: "h-4 w-4 mr-2" }), t('nav.logout')] })] })] }) }) }) })] }));
+}

package/dist/shell/components/MainContent.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { Module } from "../types";
+interface MainContentProps {
+    modules: Module[];
+    children?: ReactNode;
+}
+export declare function MainContent({ modules, children }: MainContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MainContent.d.ts.map

package/dist/shell/components/MainContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainContent.d.ts","sourceRoot":"","sources":["../../../src/shell/components/MainContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOvC,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAmIlE"}

package/dist/shell/components/MainContent.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState, useEffect, useCallback } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useI18n } from "../../hooks/useI18n";
+export function MainContent({ modules, children }) {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const { t, i18n } = useI18n();
+    const [breadcrumbs, setBreadcrumbs] = useState([]);
+    // Helper to translate module/command titles
+    // titleKey format: "namespace:key" (e.g., "tasks:module.title")
+    const translateTitle = useCallback((title, titleKey) => {
+        if (titleKey && titleKey.includes(':')) {
+            // Parse "namespace:key" format
+            const [ns, key] = titleKey.split(':');
+            // Use i18n.t with explicit namespace option
+            const translated = i18n.t(key, { ns, defaultValue: title });
+            return translated;
+        }
+        if (titleKey) {
+            // Fallback: try using the titleKey directly
+            const translated = t(titleKey, { defaultValue: title });
+            return translated;
+        }
+        return title;
+    }, [i18n, t]);
+    // Auto-detect module and update breadcrumbs based on current route
+    useEffect(() => {
+        const currentPath = location.pathname;
+        // Check if we're on settings page
+        if (currentPath === "/_settings") {
+            setBreadcrumbs([{ label: t('breadcrumbs.home'), href: "/" }, { label: t('breadcrumbs.settings') }]);
+            return;
+        }
+        // Check if we're on profile page
+        if (currentPath === "/_profile") {
+            setBreadcrumbs([{ label: t('breadcrumbs.home'), href: "/" }, { label: t('breadcrumbs.profile') }]);
+            return;
+        }
+        // Check if we're on registry page
+        if (currentPath === "/_registry") {
+            setBreadcrumbs([{ label: t('breadcrumbs.home'), href: "/" }, { label: t('breadcrumbs.registry') }]);
+            return;
+        }
+        // Find module that matches current path (for module routes)
+        const module = modules.find((m) => m.status === "active" &&
+            (currentPath === m.routeBase ||
+                currentPath.startsWith(m.routeBase + "/")));
+        if (module) {
+            // Check if current path matches a specific command
+            const command = module.commands?.find((cmd) => currentPath === cmd.route || currentPath.startsWith(cmd.route));
+            // Generate breadcrumbs from path
+            const crumbs = [{ label: t('breadcrumbs.home'), href: "/" }];
+            // Add module as breadcrumb (with translation)
+            const moduleHref = module.commands && module.commands.length > 0
+                ? module.commands[0].route
+                : module.routeBase;
+            crumbs.push({ label: translateTitle(module.title, module.titleKey), href: moduleHref });
+            if (command) {
+                // Add command as breadcrumb (with translation)
+                crumbs.push({ label: translateTitle(command.title, command.titleKey) });
+            }
+            else {
+                // Add sub-paths if any (for non-command routes)
+                const subPath = currentPath.replace(module.routeBase, "");
+                if (subPath && subPath !== "/") {
+                    const parts = subPath.split("/").filter(Boolean);
+                    parts.forEach((part, index) => {
+                        const label = part.charAt(0).toUpperCase() + part.slice(1);
+                        const isLast = index === parts.length - 1;
+                        crumbs.push({
+                            label,
+                            href: isLast
+                                ? undefined
+                                : `${module.routeBase}/${parts.slice(0, index + 1).join("/")}`,
+                        });
+                    });
+                }
+            }
+            setBreadcrumbs(crumbs);
+        }
+        else {
+            // No module matched, show home
+            setBreadcrumbs([{ label: t('breadcrumbs.home') }]);
+        }
+    }, [location.pathname, modules, t, translateTitle]);
+    return (_jsxs("main", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx("div", { "data-testid": "breadcrumbs", className: "flex h-10 items-center justify-between border-b px-4 text-sm text-muted-foreground", children: _jsx("div", { className: "flex items-center gap-2", children: breadcrumbs.map((crumb, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { children: "/" }), crumb.href ? (_jsx("button", { onClick: () => navigate(crumb.href), className: "transition-colors hover:text-foreground", children: crumb.label })) : (_jsx("span", { className: "text-foreground", children: crumb.label }))] }, index))) }) }), _jsx("div", { className: "flex-1 overflow-auto p-4", "data-testid": "module-container", children: children })] }));
+}

package/dist/shell/components/ModuleOverview.d.ts

@@ -0,0 +1,7 @@
+import type { Module } from "../types";
+interface ModuleOverviewProps {
+    modules: Module[];
+}
+export declare function ModuleOverview({ modules }: ModuleOverviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModuleOverview.d.ts.map

package/dist/shell/components/ModuleOverview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleOverview.d.ts","sourceRoot":"","sources":["../../../src/shell/components/ModuleOverview.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CAkK9D"}