@cedros/admin-react 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+# @cedros/admin-react
+
+Shared `AdminShell` host and admin plugin contract for Cedros packages.
+
+## Install
+
+```bash
+npm install @cedros/admin-react react react-dom
+```
+
+## Usage
+
+```tsx
+import { AdminShell, HOST_SERVICE_IDS } from "@cedros/admin-react";
+import "@cedros/admin-react/styles.css";
+
+<AdminShell
+  hostContext={{
+    services: {
+      [HOST_SERVICE_IDS.cedrosLogin]: {
+        user: { id: "user-1", email: "admin@example.com" },
+        getAccessToken: () => null,
+        serverUrl: "https://auth.example.com"
+      }
+    }
+  }}
+  plugins={[]}
+/>;
+```
+
+This package is the canonical shared admin shell for `cedros-login` and `cedros-pay`.
+
+It intentionally owns only:
+- `AdminShell`
+- the shared plugin types/contracts
+- the host service-bag helpers used by login/pay
+
+It intentionally does not own `cedros-data`'s authored-content, extension-management, or CMS runtime surface.

package/dist/AdminShell.d.ts

@@ -0,0 +1,34 @@
+import { type JSX, type ReactNode } from "react";
+import type { AdminPlugin, AdminSectionComponent, AdminShellSectionWrapper, HostContext, PluginContext, PluginRegistry, QualifiedSectionId, ResolvedSection } from "./types.js";
+export interface AdminShellProps {
+    title?: string;
+    plugins?: AdminPlugin[];
+    hostContext: HostContext;
+    defaultSection?: QualifiedSectionId;
+    pageSize?: number;
+    refreshInterval?: number;
+    onSectionChange?: (section: QualifiedSectionId) => void;
+    logo?: ReactNode;
+    profileMenu?: ReactNode;
+    sidebarFooter?: ReactNode;
+    onSettingsClick?: () => void;
+    onLogoutClick?: () => void;
+    sectionWrappers?: AdminShellSectionWrapper[];
+    loadingFallback?: ReactNode;
+    className?: string;
+}
+export interface AdminShellContextValue {
+    registry: PluginRegistry;
+    hostContext: HostContext;
+    activeSection: QualifiedSectionId | null;
+    setActiveSection: (section: QualifiedSectionId) => void;
+    getPluginContext: (pluginId: string) => PluginContext | null;
+}
+export interface CurrentSectionState {
+    Component: AdminSectionComponent;
+    plugin: AdminPlugin;
+    pluginContext: PluginContext;
+    section: ResolvedSection;
+}
+export declare function useAdminShell(): AdminShellContextValue;
+export declare function AdminShell({ title, plugins: initialPlugins, hostContext, defaultSection, pageSize, refreshInterval, onSectionChange, logo, profileMenu, sidebarFooter, onSettingsClick, onLogoutClick, sectionWrappers, loadingFallback, className }: AdminShellProps): JSX.Element;

package/dist/AdminShell.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { AdminShellContent, AdminShellSidebar } from "./adminShellLayout.js";
+import { canHostAccessAdminSection, readAdminProfile } from "./adminHostServices.js";
+import { createPluginRegistry } from "./pluginRegistry.js";
+import { ProfileDropdown } from "./ProfileDropdown.js";
+const AdminShellContext = createContext(null);
+export function useAdminShell() {
+    const context = useContext(AdminShellContext);
+    if (!context) {
+        throw new Error("useAdminShell must be used within AdminShell");
+    }
+    return context;
+}
+export function AdminShell({ title = "Admin", plugins: initialPlugins = [], hostContext, defaultSection, pageSize = 20, refreshInterval = 0, onSectionChange, logo, profileMenu, sidebarFooter, onSettingsClick, onLogoutClick, sectionWrappers = [], loadingFallback, className }) {
+    const [registry] = useState(() => createPluginRegistry(initialPlugins));
+    const [registeredPlugins, setRegisteredPlugins] = useState(() => registry.getAll());
+    const [requestedActiveSection, setRequestedActiveSection] = useState(() => defaultSection ?? null);
+    const [collapsedGroups, setCollapsedGroups] = useState(new Set());
+    useEffect(() => registry.subscribe(setRegisteredPlugins), [registry]);
+    useEffect(() => {
+        syncRegistryPlugins(registry, initialPlugins);
+        setRegisteredPlugins(registry.getAll());
+    }, [initialPlugins, registry]);
+    const allSections = useMemo(() => resolveVisibleSections(registeredPlugins, hostContext), [registeredPlugins, hostContext]);
+    const groupConfigs = useMemo(() => buildGroupConfigMap(registeredPlugins), [registeredPlugins]);
+    const groupedSections = useMemo(() => groupSections(allSections, groupConfigs), [allSections, groupConfigs]);
+    const activeSection = useMemo(() => resolveActiveSection(requestedActiveSection, allSections), [requestedActiveSection, allSections]);
+    const currentSection = useMemo(() => resolveCurrentSectionState(registry, activeSection, hostContext, allSections), [registry, activeSection, hostContext, allSections]);
+    useEffect(() => {
+        if (requestedActiveSection !== activeSection) {
+            setRequestedActiveSection(activeSection);
+        }
+    }, [requestedActiveSection, activeSection]);
+    const setActiveSection = useCallback((section) => {
+        setRequestedActiveSection(section);
+        onSectionChange?.(section);
+    }, [onSectionChange]);
+    const getPluginContext = useCallback((pluginId) => {
+        const plugin = registry.get(pluginId);
+        return plugin ? plugin.createPluginContext(hostContext) : null;
+    }, [registry, hostContext]);
+    const toggleGroup = useCallback((groupName) => {
+        setCollapsedGroups((previous) => {
+            const next = new Set(previous);
+            if (next.has(groupName)) {
+                next.delete(groupName);
+            }
+            else {
+                next.add(groupName);
+            }
+            return next;
+        });
+    }, []);
+    const contextValue = useMemo(() => ({
+        registry,
+        hostContext,
+        activeSection,
+        setActiveSection,
+        getPluginContext
+    }), [registry, hostContext, activeSection, setActiveSection, getPluginContext]);
+    const resolvedProfileMenu = profileMenu === undefined
+        ? buildDefaultProfileMenu(hostContext, { onSettingsClick, onLogoutClick })
+        : profileMenu;
+    return (_jsx(AdminShellContext.Provider, { value: contextValue, children: _jsxs("div", { className: joinClassNames("cedros-admin", "cedros-admin-shell", className), children: [_jsx(AdminShellSidebar, { title: title, logo: logo, profileMenu: resolvedProfileMenu, sidebarFooter: sidebarFooter, groupedSections: groupedSections, groupConfigs: groupConfigs, activeSection: activeSection, collapsedGroups: collapsedGroups, onToggleGroup: toggleGroup, onSelectSection: setActiveSection }), _jsx(AdminShellContent, { allSections: allSections, hasRegisteredPlugins: registeredPlugins.length > 0, currentSection: currentSection, hostContext: hostContext, activeSection: activeSection, pageSize: pageSize, refreshInterval: refreshInterval, loadingFallback: loadingFallback, sectionWrappers: sectionWrappers })] }) }));
+}
+function buildDefaultProfileMenu(hostContext, actions) {
+    const user = readAdminProfile(hostContext);
+    if (!user) {
+        return null;
+    }
+    return (_jsx(ProfileDropdown, { name: user.name, email: user.email, picture: user.picture, onSettings: actions.onSettingsClick, onLogout: actions.onLogoutClick }));
+}
+function syncRegistryPlugins(registry, nextPlugins) {
+    const nextIds = new Set(nextPlugins.map((plugin) => plugin.id));
+    registry.getAll().forEach((plugin) => {
+        if (!nextIds.has(plugin.id)) {
+            registry.unregister(plugin.id);
+        }
+    });
+    nextPlugins.forEach((plugin) => {
+        if (registry.get(plugin.id) !== plugin) {
+            registry.register(plugin);
+        }
+    });
+}
+function resolveVisibleSections(plugins, hostContext) {
+    return plugins.flatMap((plugin) => plugin.sections
+        .filter((section) => isSectionVisible(section, plugin, hostContext))
+        .map((section) => ({
+        ...section,
+        qualifiedId: `${plugin.id}:${section.id}`,
+        pluginId: plugin.id,
+        cssNamespace: plugin.cssNamespace
+    })));
+}
+function isSectionVisible(section, plugin, hostContext) {
+    if (section.requiredPermission && !plugin.checkPermission(section.requiredPermission, hostContext)) {
+        return false;
+    }
+    return canHostAccessAdminSection(hostContext, section.id);
+}
+function resolveActiveSection(requestedSection, allSections) {
+    if (requestedSection && allSections.some((section) => section.qualifiedId === requestedSection)) {
+        return requestedSection;
+    }
+    return allSections[0]?.qualifiedId ?? null;
+}
+function buildGroupConfigMap(plugins) {
+    const groups = new Map();
+    plugins.forEach((plugin) => {
+        plugin.groups?.forEach((group) => {
+            if (!groups.has(group.label)) {
+                groups.set(group.label, group);
+            }
+        });
+    });
+    return groups;
+}
+function groupSections(sections, groupConfigs) {
+    const groups = new Map();
+    sections.forEach((section) => {
+        const groupName = section.group ?? "Menu";
+        groups.set(groupName, [...(groups.get(groupName) ?? []), section]);
+    });
+    return Array.from(groups.entries())
+        .sort(([left], [right]) => {
+        const leftOrder = groupConfigs.get(left)?.order ?? 99;
+        const rightOrder = groupConfigs.get(right)?.order ?? 99;
+        return leftOrder - rightOrder;
+    })
+        .map(([groupName, grouped]) => [groupName, [...grouped].sort(compareSectionsByOrder)]);
+}
+function compareSectionsByOrder(left, right) {
+    return (left.order ?? 0) - (right.order ?? 0);
+}
+function resolveCurrentSectionState(registry, activeSection, hostContext, sections) {
+    if (!activeSection) {
+        return null;
+    }
+    const section = sections.find((entry) => entry.qualifiedId === activeSection);
+    const plugin = section ? registry.get(section.pluginId) : undefined;
+    const Component = section ? plugin?.components[section.id] : undefined;
+    if (!section || !plugin || !Component) {
+        return null;
+    }
+    return {
+        Component,
+        plugin,
+        pluginContext: plugin.createPluginContext(hostContext),
+        section
+    };
+}
+function joinClassNames(...values) {
+    return values.filter(Boolean).join(" ");
+}

package/dist/ProfileDropdown.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from "react";
+export interface ProfileDropdownProps {
+    name?: string;
+    email?: string;
+    picture?: string;
+    onSettings?: () => void;
+    onLogout?: () => void;
+    className?: string;
+}
+export declare function ProfileDropdown({ name, email, picture, onSettings, onLogout, className }: ProfileDropdownProps): JSX.Element;

package/dist/ProfileDropdown.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+export function ProfileDropdown({ name, email, picture, onSettings, onLogout, className = "" }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const displayName = name || "User";
+    const initial = (name?.[0] || email?.[0] || "?").toUpperCase();
+    useDismissDropdown({
+        dropdownRef,
+        isOpen,
+        onClose: () => setIsOpen(false)
+    });
+    const handleSettings = useCallback(() => {
+        setIsOpen(false);
+        onSettings?.();
+    }, [onSettings]);
+    const handleLogout = useCallback(() => {
+        setIsOpen(false);
+        onLogout?.();
+    }, [onLogout]);
+    return (_jsxs("div", { className: `cedros-profile-dropdown ${className}`.trim(), ref: dropdownRef, children: [_jsx(ProfileDropdownTrigger, { displayName: displayName, email: email, picture: picture, initial: initial, isOpen: isOpen, onToggle: () => setIsOpen((previous) => !previous) }), isOpen && _jsx(ProfileDropdownMenu, { onSettings: handleSettings, onLogout: handleLogout })] }));
+}
+function useDismissDropdown({ dropdownRef, isOpen, onClose }) {
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        function handleClickOutside(event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                onClose();
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [dropdownRef, isOpen, onClose]);
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        function handleEscape(event) {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        }
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, onClose]);
+}
+function ProfileDropdownTrigger({ displayName, email, picture, initial, isOpen, onToggle }) {
+    return (_jsxs("button", { type: "button", className: "cedros-profile-dropdown__trigger", onClick: onToggle, "aria-expanded": isOpen, "aria-haspopup": "menu", children: [_jsx("div", { className: "cedros-profile-dropdown__avatar", children: picture ? (_jsx("img", { src: picture, alt: displayName, className: "cedros-profile-dropdown__avatar-img", referrerPolicy: "no-referrer" })) : (_jsx("span", { className: "cedros-profile-dropdown__avatar-placeholder", children: initial })) }), _jsxs("div", { className: "cedros-profile-dropdown__info", children: [_jsx("span", { className: "cedros-profile-dropdown__name", children: displayName }), email && _jsx("span", { className: "cedros-profile-dropdown__email", children: email })] }), _jsx("svg", { className: `cedros-profile-dropdown__chevron ${isOpen ? "cedros-profile-dropdown__chevron--open" : ""}`.trim(), width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }));
+}
+function ProfileDropdownMenu({ onSettings, onLogout }) {
+    return (_jsxs("div", { className: "cedros-profile-dropdown__menu", role: "menu", children: [onSettings && (_jsxs("button", { type: "button", className: "cedros-profile-dropdown__item", onClick: onSettings, role: "menuitem", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }), "Settings"] })), onLogout && (_jsxs("button", { type: "button", className: "cedros-profile-dropdown__item cedros-profile-dropdown__item--danger", onClick: onLogout, role: "menuitem", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }), _jsx("polyline", { points: "16 17 21 12 16 7" }), _jsx("line", { x1: "21", x2: "9", y1: "12", y2: "12" })] }), "Log out"] }))] }));
+}

package/dist/adminHostServices.d.ts

@@ -0,0 +1,20 @@
+import type { AdminHostContext } from "./types.js";
+export interface AdminProfileService {
+    getProfile?: () => AdminProfileSummary | null;
+    profile?: AdminProfileSummary | null;
+    user?: {
+        email?: string;
+        name?: string;
+        picture?: string;
+    } | null;
+}
+export interface AdminSectionAccessService {
+    canAccess: (sectionId: string) => boolean;
+}
+export interface AdminProfileSummary {
+    email?: string;
+    name?: string;
+    picture?: string;
+}
+export declare function readAdminProfile(hostContext: AdminHostContext): AdminProfileSummary | null;
+export declare function canHostAccessAdminSection(hostContext: AdminHostContext, sectionId: string): boolean;

package/dist/adminHostServices.js

@@ -0,0 +1,34 @@
+import { HOST_SERVICE_IDS, getHostService } from "./platform.js";
+export function readAdminProfile(hostContext) {
+    const profileService = getHostService(hostContext, HOST_SERVICE_IDS.adminProfile);
+    if (profileService?.getProfile) {
+        return profileService.getProfile();
+    }
+    if (profileService?.profile) {
+        return profileService.profile;
+    }
+    if (profileService?.user) {
+        return {
+            email: profileService.user.email,
+            name: profileService.user.name,
+            picture: profileService.user.picture
+        };
+    }
+    const user = getHostService(hostContext, HOST_SERVICE_IDS.cedrosLogin)?.user;
+    if (!user) {
+        return null;
+    }
+    return {
+        email: user.email,
+        name: user.name,
+        picture: user.picture
+    };
+}
+export function canHostAccessAdminSection(hostContext, sectionId) {
+    const access = getHostService(hostContext, HOST_SERVICE_IDS.adminSectionAccess);
+    if (access) {
+        return access.canAccess(sectionId);
+    }
+    const permissions = getHostService(hostContext, HOST_SERVICE_IDS.dashboardPermissions);
+    return permissions?.canAccess(sectionId) ?? true;
+}

package/dist/adminShellLayout.d.ts

@@ -0,0 +1,29 @@
+import { type JSX, type ReactNode } from "react";
+import type { AdminGroupConfig, AdminShellSectionWrapper, HostContext, QualifiedSectionId, ResolvedSection } from "./types.js";
+import type { CurrentSectionState } from "./AdminShell.js";
+interface AdminShellSidebarProps {
+    title: string;
+    logo?: ReactNode;
+    profileMenu?: ReactNode;
+    sidebarFooter?: ReactNode;
+    groupedSections: Array<[string, ResolvedSection[]]>;
+    groupConfigs: Map<string, AdminGroupConfig>;
+    activeSection: QualifiedSectionId | null;
+    collapsedGroups: Set<string>;
+    onToggleGroup: (groupName: string) => void;
+    onSelectSection: (section: QualifiedSectionId) => void;
+}
+interface AdminShellContentProps {
+    allSections: ResolvedSection[];
+    hasRegisteredPlugins: boolean;
+    currentSection: CurrentSectionState | null;
+    hostContext: HostContext;
+    activeSection: QualifiedSectionId | null;
+    pageSize: number;
+    refreshInterval: number;
+    loadingFallback?: ReactNode;
+    sectionWrappers: AdminShellSectionWrapper[];
+}
+export declare function AdminShellSidebar({ title, logo, profileMenu, sidebarFooter, groupedSections, groupConfigs, activeSection, collapsedGroups, onToggleGroup, onSelectSection }: AdminShellSidebarProps): JSX.Element;
+export declare function AdminShellContent({ allSections, hasRegisteredPlugins, currentSection, hostContext, activeSection, pageSize, refreshInterval, loadingFallback, sectionWrappers }: AdminShellContentProps): JSX.Element;
+export {};

package/dist/adminShellLayout.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+export function AdminShellSidebar({ title, logo, profileMenu, sidebarFooter, groupedSections, groupConfigs, activeSection, collapsedGroups, onToggleGroup, onSelectSection }) {
+    return (_jsxs("aside", { className: "cedros-admin-shell__sidebar", children: [_jsx("div", { className: "cedros-admin-shell__sidebar-header", children: logo ?? (_jsx("div", { className: "cedros-admin-shell__logo", children: _jsx("span", { className: "cedros-admin-shell__logo-text", children: title }) })) }), _jsx("nav", { className: "cedros-admin-shell__nav", children: groupedSections.map(([groupName, sections]) => (_jsx(SectionNavigationGroup, { groupName: groupName, sections: sections, groupConfig: groupConfigs.get(groupName), activeSection: activeSection, isCollapsed: collapsedGroups.has(groupName), onToggleGroup: onToggleGroup, onSelectSection: onSelectSection }, groupName))) }), (profileMenu || sidebarFooter) && (_jsxs("div", { className: "cedros-admin-shell__sidebar-footer", children: [profileMenu, sidebarFooter] }))] }));
+}
+export function AdminShellContent({ allSections, hasRegisteredPlugins, currentSection, hostContext, activeSection, pageSize, refreshInterval, loadingFallback, sectionWrappers }) {
+    return (_jsx("main", { className: "cedros-admin-shell__main", children: currentSection ? (wrapSectionContent(_jsx(Suspense, { fallback: loadingFallback ?? _jsx(DefaultLoadingFallback, {}), children: _jsx("div", { className: "cedros-admin-shell__section", "data-plugin-namespace": currentSection.plugin.cssNamespace, children: _jsx(currentSection.Component, { pluginContext: currentSection.pluginContext, pageSize: pageSize, refreshInterval: refreshInterval }) }) }), sectionWrappers, hostContext, activeSection, currentSection)) : (_jsx("div", { className: "cedros-admin-shell__empty", children: buildEmptyStateMessage(allSections, hasRegisteredPlugins) })) }));
+}
+function SectionNavigationGroup({ groupName, sections, groupConfig, activeSection, isCollapsed, onToggleGroup, onSelectSection }) {
+    const collapsible = isGroupCollapsible(groupName, groupConfig);
+    return (_jsxs("div", { className: "cedros-admin-shell__nav-group", children: [_jsx(GroupLabel, { groupName: groupName, collapsible: collapsible, isCollapsed: isCollapsed, onToggleGroup: onToggleGroup }), (!collapsible || !isCollapsed) &&
+                sections.map((section) => (_jsx(SectionNavigationButton, { section: section, activeSection: activeSection, onSelectSection: onSelectSection }, section.qualifiedId)))] }));
+}
+function GroupLabel({ groupName, collapsible, isCollapsed, onToggleGroup }) {
+    if (!collapsible) {
+        return _jsx("span", { className: "cedros-admin-shell__nav-label", children: groupName });
+    }
+    return (_jsxs("button", { type: "button", className: "cedros-admin-shell__nav-label cedros-admin-shell__nav-label--collapsible", onClick: () => onToggleGroup(groupName), "aria-expanded": !isCollapsed, children: [_jsx("span", { children: groupName }), _jsx("span", { className: joinClassNames("cedros-admin-shell__nav-chevron", !isCollapsed ? "cedros-admin-shell__nav-chevron--expanded" : undefined), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m9 18 6-6-6-6" }) }) })] }));
+}
+function SectionNavigationButton({ section, activeSection, onSelectSection }) {
+    return (_jsxs("button", { type: "button", className: joinClassNames("cedros-admin-shell__nav-item", activeSection === section.qualifiedId ? "cedros-admin-shell__nav-item--active" : undefined), onClick: () => onSelectSection(section.qualifiedId), "aria-current": activeSection === section.qualifiedId ? "page" : undefined, children: [_jsx("span", { className: "cedros-admin-shell__nav-icon", children: renderSectionIcon(section.icon) }), _jsx("span", { className: "cedros-admin-shell__nav-text", children: section.label }), section.badge && _jsx("span", { className: "cedros-admin-shell__nav-badge", children: section.badge })] }));
+}
+function renderSectionIcon(icon) {
+    if (typeof icon === "function") {
+        return icon();
+    }
+    return icon;
+}
+function isGroupCollapsible(groupName, groupConfig) {
+    return groupName === "Configuration" || groupConfig?.defaultCollapsed !== undefined;
+}
+function joinClassNames(...values) {
+    return values.filter(Boolean).join(" ");
+}
+function wrapSectionContent(content, wrappers, hostContext, activeSection, currentSection) {
+    return wrappers.reduceRight((children, Wrapper) => (_jsx(Wrapper, { hostContext: hostContext, activeSection: activeSection, currentPlugin: currentSection.plugin, currentSection: currentSection.section, pluginContext: currentSection.pluginContext, children: children })), content);
+}
+function buildEmptyStateMessage(allSections, hasRegisteredPlugins) {
+    if (allSections.length === 0) {
+        return hasRegisteredPlugins ? "No sections available" : "No plugins loaded";
+    }
+    return "Select a section from the sidebar";
+}
+function DefaultLoadingFallback() {
+    return (_jsxs("div", { className: "cedros-admin-shell__loading", children: [_jsx("span", { className: "cedros-admin-shell__loading-spinner", "aria-hidden": "true" }), _jsx("span", { children: "Loading..." })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { AdminShell, useAdminShell } from "./AdminShell.js";
+export type { AdminShellContextValue, AdminShellProps, CurrentSectionState } from "./AdminShell.js";
+export type { AdminSectionComponent, AdminGroupConfig, AdminHostContext, AdminHostServiceBag, AdminPlugin, AdminSectionConfig, AdminSectionProps, AdminShellSectionWrapper, AdminShellSectionWrapperProps, HostContext, HostServiceId, PluginContext, PluginId, PluginPermission, PluginRegistry, QualifiedSectionId, ResolvedSection, SectionId } from "./types.js";
+export { HOST_SERVICE_IDS, buildAdminHostServiceBag, createAdminHostServiceBag, getHostService, getServiceFromBag } from "./platform.js";
+export { createPluginRegistry } from "./pluginRegistry.js";
+export { canHostAccessAdminSection, readAdminProfile } from "./adminHostServices.js";
+export type { AdminProfileService, AdminProfileSummary, AdminSectionAccessService } from "./adminHostServices.js";
+export { ProfileDropdown } from "./ProfileDropdown.js";
+export type { ProfileDropdownProps } from "./ProfileDropdown.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { AdminShell, useAdminShell } from "./AdminShell.js";
+export { HOST_SERVICE_IDS, buildAdminHostServiceBag, createAdminHostServiceBag, getHostService, getServiceFromBag } from "./platform.js";
+export { createPluginRegistry } from "./pluginRegistry.js";
+export { canHostAccessAdminSection, readAdminProfile } from "./adminHostServices.js";
+export { ProfileDropdown } from "./ProfileDropdown.js";

package/dist/platform.d.ts

@@ -0,0 +1,13 @@
+import type { AdminHostContext, AdminHostServiceBag, HostServiceId } from "./types.js";
+export declare const HOST_SERVICE_IDS: {
+    readonly adminProfile: "admin-profile";
+    readonly adminSectionAccess: "admin-section-access";
+    readonly cedrosLogin: "cedros-login";
+    readonly cedrosPay: "cedros-pay";
+    readonly org: "org";
+    readonly dashboardPermissions: "dashboard-permissions";
+};
+export declare function createAdminHostServiceBag(initialServices?: AdminHostServiceBag): AdminHostServiceBag;
+export declare function buildAdminHostServiceBag(hostContext: AdminHostContext): AdminHostServiceBag;
+export declare function getHostService<T>(hostContext: AdminHostContext, serviceId: HostServiceId): T | undefined;
+export declare function getServiceFromBag<T>(services: AdminHostServiceBag, serviceId: HostServiceId): T | undefined;

package/dist/platform.js

@@ -0,0 +1,41 @@
+export const HOST_SERVICE_IDS = {
+    adminProfile: "admin-profile",
+    adminSectionAccess: "admin-section-access",
+    cedrosLogin: "cedros-login",
+    cedrosPay: "cedros-pay",
+    org: "org",
+    dashboardPermissions: "dashboard-permissions"
+};
+export function createAdminHostServiceBag(initialServices = {}) {
+    return { ...initialServices };
+}
+export function buildAdminHostServiceBag(hostContext) {
+    const services = createAdminHostServiceBag(hostContext.services);
+    if (!(HOST_SERVICE_IDS.adminProfile in services) && hostContext.cedrosLogin?.user) {
+        services[HOST_SERVICE_IDS.adminProfile] = {
+            user: hostContext.cedrosLogin.user
+        };
+    }
+    if (!(HOST_SERVICE_IDS.adminSectionAccess in services) && hostContext.dashboardPermissions) {
+        services[HOST_SERVICE_IDS.adminSectionAccess] = hostContext.dashboardPermissions;
+    }
+    if (!(HOST_SERVICE_IDS.cedrosLogin in services) && hostContext.cedrosLogin) {
+        services[HOST_SERVICE_IDS.cedrosLogin] = hostContext.cedrosLogin;
+    }
+    if (!(HOST_SERVICE_IDS.cedrosPay in services) && hostContext.cedrosPay) {
+        services[HOST_SERVICE_IDS.cedrosPay] = hostContext.cedrosPay;
+    }
+    if (!(HOST_SERVICE_IDS.org in services) && hostContext.org) {
+        services[HOST_SERVICE_IDS.org] = hostContext.org;
+    }
+    if (!(HOST_SERVICE_IDS.dashboardPermissions in services) && hostContext.dashboardPermissions) {
+        services[HOST_SERVICE_IDS.dashboardPermissions] = hostContext.dashboardPermissions;
+    }
+    return services;
+}
+export function getHostService(hostContext, serviceId) {
+    return getServiceFromBag(buildAdminHostServiceBag(hostContext), serviceId);
+}
+export function getServiceFromBag(services, serviceId) {
+    return services[serviceId];
+}

package/dist/pluginRegistry.d.ts

@@ -0,0 +1,2 @@
+import type { AdminPlugin, PluginRegistry } from "./types.js";
+export declare function createPluginRegistry(initialPlugins?: AdminPlugin[]): PluginRegistry;

package/dist/pluginRegistry.js

@@ -0,0 +1,34 @@
+class PluginRegistryStore {
+    plugins = new Map();
+    listeners = new Set();
+    register(plugin) {
+        this.plugins.set(plugin.id, plugin);
+        this.notify();
+    }
+    unregister(pluginId) {
+        if (!this.plugins.has(pluginId)) {
+            return;
+        }
+        this.plugins.delete(pluginId);
+        this.notify();
+    }
+    get(pluginId) {
+        return this.plugins.get(pluginId);
+    }
+    getAll() {
+        return Array.from(this.plugins.values());
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    notify() {
+        const plugins = this.getAll();
+        this.listeners.forEach((listener) => listener(plugins));
+    }
+}
+export function createPluginRegistry(initialPlugins = []) {
+    const registry = new PluginRegistryStore();
+    initialPlugins.forEach((plugin) => registry.register(plugin));
+    return registry;
+}

package/dist/shell.css

@@ -0,0 +1,440 @@
+.cedros-admin {
+  --admin-bg: var(--cedros-background, #ffffff);
+  --admin-fg: var(--cedros-foreground, #0f172a);
+  --admin-muted: var(--cedros-muted-foreground, #64748b);
+  --admin-muted-bg: var(--cedros-muted, #f1f5f9);
+  --admin-border: var(--cedros-border, #e2e8f0);
+  --admin-accent: var(--cedros-accent, #f8fafc);
+  --admin-card-bg: color-mix(in srgb, var(--admin-bg) 94%, var(--admin-accent) 6%);
+  --admin-ring: var(--cedros-ring, #0f172a);
+  --admin-primary: var(--cedros-primary, #0f172a);
+  --admin-primary-fg: var(--cedros-primary-foreground, #f8fafc);
+  --admin-radius: 0.75rem;
+  --admin-font: var(
+    --cedros-font-sans,
+    "IBM Plex Sans",
+    "Avenir Next",
+    "Segoe UI",
+    sans-serif
+  );
+  --admin-font-mono: var(
+    --cedros-font-mono,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace
+  );
+}
+
+.cedros-dark .cedros-admin,
+.cedros-admin.cedros-admin--dark {
+  --admin-bg: var(--cedros-background, #09090b);
+  --admin-fg: var(--cedros-foreground, #fafafa);
+  --admin-muted: var(--cedros-muted-foreground, #a1a1aa);
+  --admin-muted-bg: var(--cedros-muted, #18181b);
+  --admin-border: var(--cedros-border, #27272a);
+  --admin-accent: var(--cedros-accent, #18181b);
+  --admin-card-bg: color-mix(in srgb, var(--admin-bg) 90%, var(--admin-accent) 10%);
+  --admin-ring: var(--cedros-ring, #fafafa);
+  --admin-primary: var(--cedros-primary, #fafafa);
+  --admin-primary-fg: var(--cedros-primary-foreground, #09090b);
+}
+
+.cedros-admin-shell {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  grid-template-rows: 1fr;
+  min-height: 400px;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--admin-border);
+  border-radius: var(--admin-radius);
+  background: var(--admin-bg);
+  color: var(--admin-fg);
+  font-family: var(--admin-font);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.cedros-admin-shell__sidebar {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  border-right: 1px solid var(--admin-border);
+  background: color-mix(in srgb, var(--admin-bg) 88%, var(--admin-accent) 12%);
+}
+
+.cedros-admin-shell__sidebar-header {
+  padding: 1rem 0.75rem;
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.cedros-admin-shell__logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cedros-admin-shell__logo-text {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--admin-fg);
+}
+
+.cedros-admin-shell__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.cedros-admin-shell__nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cedros-admin-shell__nav-group + .cedros-admin-shell__nav-group {
+  margin-top: 1rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--admin-border);
+}
+
+.cedros-admin-shell__nav-label {
+  padding: 0.5rem 0.75rem 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--admin-muted);
+}
+
+.cedros-admin-shell__nav-label--collapsible {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.cedros-admin-shell__nav-chevron {
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  transition: transform 160ms ease;
+}
+
+.cedros-admin-shell__nav-chevron svg {
+  width: 0.625rem;
+  height: 0.625rem;
+  opacity: 0.6;
+}
+
+.cedros-admin-shell__nav-chevron--expanded {
+  transform: rotate(90deg);
+}
+
+.cedros-admin-shell__nav-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.625rem;
+  border: none;
+  border-radius: calc(var(--admin-radius) - 4px);
+  background: transparent;
+  color: var(--admin-muted);
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.5;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    color 140ms ease,
+    transform 140ms ease;
+}
+
+.cedros-admin-shell__nav-item:hover {
+  background: var(--admin-accent);
+  color: var(--admin-fg);
+  transform: translateX(1px);
+}
+
+.cedros-admin-shell__nav-item--active,
+.cedros-admin-shell__nav-item--active:hover {
+  background: var(--admin-accent);
+  color: var(--admin-fg);
+  transform: none;
+}
+
+.cedros-admin-shell__nav-icon {
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.75;
+}
+
+.cedros-admin-shell__nav-item:hover .cedros-admin-shell__nav-icon,
+.cedros-admin-shell__nav-item--active .cedros-admin-shell__nav-icon {
+  opacity: 1;
+}
+
+.cedros-admin-shell__nav-text {
+  white-space: nowrap;
+}
+
+.cedros-admin-shell__nav-badge {
+  display: inline-flex;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  padding: 0 0.375rem;
+  border-radius: 9999px;
+  background: var(--admin-primary);
+  color: var(--admin-primary-fg);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.cedros-admin-shell__sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: auto;
+  padding: 0.75rem;
+  border-top: 1px solid var(--admin-border);
+}
+
+.cedros-profile-dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.cedros-profile-dropdown__trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem;
+  border: none;
+  border-radius: calc(var(--admin-radius) - 4px);
+  background: var(--admin-accent);
+  color: var(--admin-fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.cedros-profile-dropdown__trigger:hover {
+  background: color-mix(in srgb, var(--admin-accent) 80%, var(--admin-fg) 20%);
+}
+
+.cedros-profile-dropdown__avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.cedros-profile-dropdown__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cedros-profile-dropdown__avatar-placeholder {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background: var(--admin-muted-bg);
+  color: var(--admin-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.cedros-profile-dropdown__info {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.cedros-profile-dropdown__name {
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cedros-profile-dropdown__email {
+  overflow: hidden;
+  color: var(--admin-muted);
+  font-size: 0.6875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cedros-profile-dropdown__chevron {
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: transform 200ms ease;
+}
+
+.cedros-profile-dropdown__chevron--open {
+  transform: rotate(180deg);
+}
+
+.cedros-profile-dropdown__menu {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  left: 0;
+  z-index: 100;
+  margin-bottom: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--admin-border);
+  border-radius: calc(var(--admin-radius) - 4px);
+  background: var(--admin-card-bg);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
+}
+
+.cedros-profile-dropdown__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  border: none;
+  border-radius: calc(var(--admin-radius) - 6px);
+  background: transparent;
+  color: var(--admin-fg);
+  font: inherit;
+  font-size: 0.8125rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.cedros-profile-dropdown__item:hover {
+  background: var(--admin-accent);
+}
+
+.cedros-profile-dropdown__item svg {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.cedros-profile-dropdown__item--danger {
+  color: var(--cedros-error, #ef4444);
+}
+
+.cedros-profile-dropdown__item--danger:hover {
+  background: color-mix(in srgb, var(--cedros-error, #ef4444) 10%, transparent);
+}
+
+.cedros-admin-shell__main {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--admin-bg);
+}
+
+.cedros-admin-shell__section {
+  min-height: 100%;
+}
+
+.cedros-admin-shell__section[data-plugin-namespace="cedros-dashboard"] {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 1.5rem;
+  scrollbar-gutter: stable;
+}
+
+.cedros-admin-shell__loading,
+.cedros-admin-shell__empty {
+  display: flex;
+  min-height: 200px;
+  align-items: center;
+  justify-content: center;
+  color: var(--admin-muted);
+}
+
+.cedros-admin-shell__loading {
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.cedros-admin-shell__loading-spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid color-mix(in srgb, var(--admin-fg) 12%, transparent);
+  border-top-color: var(--admin-fg);
+  border-radius: 9999px;
+  animation: cedros-admin-shell-spin 800ms linear infinite;
+}
+
+@keyframes cedros-admin-shell-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 768px) {
+  .cedros-admin-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  .cedros-admin-shell__sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--admin-border);
+  }
+
+  .cedros-admin-shell__nav-group {
+    flex-direction: row;
+    overflow-x: auto;
+    gap: 0.25rem;
+  }
+
+  .cedros-admin-shell__nav-group + .cedros-admin-shell__nav-group {
+    margin-top: 0.75rem;
+  }
+
+  .cedros-admin-shell__nav-label {
+    display: none;
+  }
+
+  .cedros-admin-shell__nav-item {
+    flex-shrink: 0;
+    padding: 0.5rem 0.625rem;
+  }
+
+  .cedros-admin-shell__nav-text {
+    display: none;
+  }
+
+  .cedros-admin-shell__sidebar-footer {
+    display: none;
+  }
+}

package/dist/styles.css

@@ -0,0 +1 @@
+@import "./shell.css";

package/dist/types.d.ts

@@ -0,0 +1,98 @@
+import type { ReactNode } from "react";
+export type PluginId = string;
+export type SectionId = string;
+export type QualifiedSectionId = `${PluginId}:${SectionId}`;
+export type PluginPermission = string;
+export type HostServiceId = string;
+export type AdminSectionIcon = ReactNode | (() => ReactNode);
+export interface AdminSectionConfig {
+    id: SectionId;
+    label: string;
+    icon: AdminSectionIcon;
+    group?: string;
+    order?: number;
+    requiredPermission?: PluginPermission;
+    badge?: ReactNode;
+}
+export interface AdminGroupConfig {
+    id: string;
+    label: string;
+    order: number;
+    icon?: ReactNode;
+    defaultCollapsed?: boolean;
+}
+export interface AdminSectionProps {
+    pluginContext: PluginContext;
+    pageSize: number;
+    refreshInterval: number;
+}
+export type AdminSectionComponent = (props: AdminSectionProps) => ReactNode;
+export interface PluginContext {
+    serverUrl: string;
+    userId?: string;
+    getAccessToken: () => string | null;
+    hasPermission: (permission: PluginPermission) => boolean;
+    orgId?: string;
+    pluginData?: Record<string, unknown>;
+}
+export interface HostContext {
+    cedrosLogin?: {
+        user: {
+            id: string;
+            email?: string;
+            name?: string;
+            picture?: string;
+        } | null;
+        getAccessToken: () => string | null;
+        serverUrl: string;
+    };
+    cedrosPay?: {
+        walletAddress?: string;
+        jwtToken?: string;
+        serverUrl: string;
+    };
+    org?: {
+        orgId: string;
+        role: string;
+        permissions: string[];
+    };
+    dashboardPermissions?: {
+        canAccess: (sectionId: string) => boolean;
+    };
+    services?: Record<HostServiceId, unknown>;
+    custom?: Record<string, unknown>;
+}
+export interface AdminShellSectionWrapperProps {
+    children: ReactNode;
+    hostContext: HostContext;
+    activeSection: QualifiedSectionId | null;
+    currentPlugin: AdminPlugin | null;
+    currentSection: ResolvedSection | null;
+    pluginContext: PluginContext | null;
+}
+export type AdminShellSectionWrapper = (props: AdminShellSectionWrapperProps) => ReactNode;
+export interface AdminPlugin {
+    id: PluginId;
+    name: string;
+    version: string;
+    sections: AdminSectionConfig[];
+    groups?: AdminGroupConfig[];
+    components: Record<SectionId, AdminSectionComponent>;
+    createPluginContext: (hostContext: HostContext) => PluginContext;
+    checkPermission: (permission: PluginPermission, hostContext: HostContext) => boolean;
+    cssNamespace: string;
+}
+export interface PluginRegistry {
+    register(plugin: AdminPlugin): void;
+    unregister(pluginId: PluginId): void;
+    get(pluginId: PluginId): AdminPlugin | undefined;
+    getAll(): AdminPlugin[];
+    subscribe(listener: (plugins: AdminPlugin[]) => void): () => void;
+}
+export type AdminHostContext = HostContext;
+export type AdminHostServiceBag = Record<HostServiceId, unknown>;
+export interface ResolvedSection extends AdminSectionConfig {
+    qualifiedId: QualifiedSectionId;
+    pluginId: PluginId;
+    cssNamespace: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@cedros/admin-react",
+  "version": "0.1.0",
+  "description": "Shared AdminShell host and admin UI contracts for Cedros packages",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/styles.css",
+    "./shell.css": "./dist/shell.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}