import React$1, { ReactNode, ComponentType } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { MantineSpacing } from '@mantine/core';

declare const sidebarWidth = 240;
declare const sidebarCollapsedWidth = 72;
declare const sidebarTransitionDuration = 200;
declare const sidebarHoverDelay = 100;
declare const topbarHeight = 54;
/** Height of SidebarBottomSection when expanded: outer padding sm (12+12) + 1px top border + inner padding (4+4) + Avatar md (38) = 71px */
declare const sidebarBottomSectionHeight = 71;
/** Height of SidebarBottomSection when collapsed: outer padding sm (12+12) + 1px top border + inner padding (4+4) + Avatar sm (26) = 59px */
declare const sidebarBottomSectionCollapsedHeight = 59;
/** Height of a main navigation button (px) */
declare const sidebarItemHeight = 42;
/** Padding inside main navigation buttons (px) */
declare const sidebarItemPadding = 10;
/** Vertical gap between main navigation items (px) */
declare const sidebarItemGap = 4;
/** Padding around the nav links scroll area (Mantine spacing token) */
declare const sidebarSectionPadding = "var(--mantine-spacing-sm)";
/** Left indent for sub-link items (px) */
declare const sidebarSubLinkIndent = 44;
/** ThemeIcon container size in main nav buttons (px) */
declare const sidebarIconSize = 24;
/** Icon stroke width inside nav buttons */
declare const sidebarIconStroke = 1.6;
/** Actual icon size inside the ThemeIcon (px) */
declare const sidebarIconInnerSize = 20;
/** Collapse/expand toggle icon size (px) */
declare const sidebarToggleIconSize = 20;
/** Vertical padding for sub-link items (px) */
declare const sidebarSubLinkPaddingY = 6;
/** Horizontal padding for sub-link items (px) */
declare const sidebarSubLinkPaddingX = 10;
/** Icon size in CollapsibleSidebarGroup chevrons (px) */
declare const sidebarGroupChevronSize = 14;
/** Icon size in SubshellNavItem (px) */
declare const subshellNavItemIconSize = 14;

interface AmbientBloomGridProps {
    /** Color used for the bloom lobes. Defaults to `var(--color-primary)`. */
    color?: string;
    /**
     * 0–1 intensity multiplier. The horizon lobe mixes at ~100% of this value,
     * the two rim lobes at ~65%. Default `0.1`.
     */
    intensity?: number;
    /**
     * Size multiplier for all lobes. Scales width/height and the off-canvas
     * offsets proportionally so each lobe's bright center stays anchored while
     * its reach grows. Default `1`. Useful values: `0.8` (tighter) to `1.5`
     * (broader, softer ambience).
     */
    size?: number;
}
declare function AmbientBloomGrid({ color, intensity, size }: AmbientBloomGridProps): React$1.JSX.Element;

declare function AppBackground({ children, gridGlowColor, gridGlowIntensity }: {
    children?: ReactNode;
    gridGlowColor?: string;
    gridGlowIntensity?: number;
}): react_jsx_runtime.JSX.Element;

type CyberVariant = 'chrome' | 'strike' | 'void' | 'volt';
interface CyberParticlesProps {
    /** Which particle flavor to render. */
    variant: CyberVariant;
    className?: string;
}
/**
 * Techy particle layer for cyber-themed presets.
 *
 * Sits alongside `PerspectiveGrid` / `RadiantGlow` / `FloatingOrbs` / `FilmGrain`
 * at the same z-level (via document order) and adds rising electric sparks
 * that inherit their color from `var(--color-primary)` so they automatically
 * match the active preset's accent:
 *
 *   - `chrome`  — brushed slate sparks
 *   - `strike`  — red sparks
 *   - `void`    — blue sparks
 *   - `volt`    — cyan sparks
 *
 * The `variant` prop is currently unused at the render level (all four
 * cyber presets share the same spark effect), but is kept in the API so
 * individual variants can diverge again without changing preset wiring.
 *
 * Particle field is generated once at module load (fresh per page reload).
 * All animations are disabled under `prefers-reduced-motion`.
 */
declare function CyberParticles({ variant: _variant, className }: CyberParticlesProps): React$1.JSX.Element;

interface CyberBackgroundProps {
    /** Which techy particle effect to layer on top of the default background. */
    variant: CyberVariant;
    /**
     * Percentage (0-100) of `--color-primary` mixed into the bottom-center
     * radial glow on the PerspectiveGrid. Higher = brighter horizon glow.
     * Defaults to a per-variant value tuned for each primary's lightness.
     */
    perspectiveGridRadialGlowIntensity?: number;
    /**
     * Percentage (0-100) scaling the visible intensity of the perspective
     * grid lines. 100 = full lineColor, 0 = invisible. Defaults to 100.
     */
    perspectiveGridLineIntensity?: number;
}
/**
 * Composite background for cyber-themed presets.
 *
 * Extends the default `AppBackground` (PerspectiveGrid + RadiantGlow +
 * FloatingOrbs + FilmGrain) with a variant-specific `CyberParticles` layer
 * inserted just below the film grain so the particles feel embedded in
 * the scene rather than sitting flat on top.
 *
 * Designed to be bundled into cyber-themed presets via
 * `ThemePreset.background`. Consumers can still override the full background
 * per-app via `<ElevasisUIProvider theme={{ background: <Custom/> }}>`.
 *
 *   - `chrome`  — Rising sparks tinted by the slate primary (cool metallic shimmer)
 *   - `strike`  — Combat HUD scan sweep + radar pings + targeting brackets
 *   - `void`    — Matrix-style digital rain
 *   - `volt`    — Circuit-board data flow with animated pulses
 */
declare function CyberBackground({ variant, perspectiveGridRadialGlowIntensity, perspectiveGridLineIntensity }: CyberBackgroundProps): React$1.JSX.Element;

type WaveVariant = 'nirvana' | 'wave' | 'honey' | 'canopy' | 'quarry';
interface WaveBackgroundProps {
    /** Which wave palette to render. */
    variant: WaveVariant;
}
declare function WaveBackground({ variant }: WaveBackgroundProps): React$1.JSX.Element;

interface FloatingMotesProps {
    /**
     * Color for the bright mote core.
     * Defaults to `var(--color-primary)`.
     */
    coreColor?: string;
    /**
     * Color for the soft outer halo.
     * Defaults to a 35% mix of `var(--color-primary)` into transparent.
     */
    haloColor?: string;
    /**
     * CSS `bottom` value for the mote origin — how far from the bottom edge
     * motes begin rising. Use `'18%'` for wave-family presets (above the wave
     * layer). Defaults to `'0'` (viewport bottom edge).
     */
    bottom?: string;
}
/**
 * Reusable floating mote layer — softly glowing orbs that rise from the
 * bottom of the viewport with gentle drift and a brightness pulse.
 *
 * Extracted from `WaveBackground` for use across all background families:
 *   - **Wave presets** — pass `coreColor`/`haloColor` from per-variant vars,
 *     `bottom="18%"` so motes emerge above the wave layer.
 *   - **Constellation presets** — default colors (primary), rises from bottom.
 *   - **Cyber presets** — replaces the noisier `CyberParticles` rising sparks.
 *
 * Particle positions are stable across preset switches (module-level generation).
 * All animations respect `prefers-reduced-motion`.
 */
declare function FloatingMotes({ coreColor, haloColor, bottom }: FloatingMotesProps): React$1.JSX.Element;

interface FilmGrainProps {
    /** Opacity in dark mode (0-1). Defaults to 0.04. */
    darkOpacity?: number;
    /** Opacity in light mode (0-1). Defaults to 0.06. */
    lightOpacity?: number;
    className?: string;
}
/**
 * Subtle animated film grain overlay using SVG feTurbulence.
 * Adapts opacity for light/dark mode automatically.
 * Designed to layer on top of other background effects.
 */
declare function FilmGrain({ darkOpacity, lightOpacity, className }: FilmGrainProps): React$1.JSX.Element;

interface FloatingOrbsProps {
    /** Override the orb color. Defaults to var(--color-primary). */
    color?: string;
    /** Number of orbs to render. Defaults to 6. */
    count?: number;
    className?: string;
}
/**
 * Soft, out-of-focus floating orbs using the primary color.
 * Creates a cinematic bokeh / light-leak effect behind content.
 */
declare function FloatingOrbs({ color, count, className }: FloatingOrbsProps): React$1.JSX.Element;

interface PerspectiveGridProps {
    /**
     * Override the bottom-center radial glow color. Defaults to a theme-aware
     * blend of `var(--color-primary)` and `var(--color-border)` so the glow
     * inherits each preset's brand hue without being purely saturated primary.
     */
    glowColor?: string;
    /**
     * Override the grid line color. Defaults to a subtle border-tinted line
     * derived from `var(--color-border)` so non-cyber presets get a theme-aware
     * grid without the boldness of cyber variants (which pass the raw border
     * token explicitly).
     */
    lineColor?: string;
    /**
     * When true, the bottom radial glow is taller, wider, and more saturated
     * — used by cyber presets to emphasize the horizon. Defaults to false so
     * non-cyber presets keep the original subtle glow.
     */
    prominentGlow?: boolean;
    /**
     * Percentage (0-100) scaling the visible intensity of the grid lines.
     * 100 = full lineColor, 0 = invisible. Defaults to 100.
     */
    lineIntensity?: number;
    /**
     * Percentage (0-100) scaling the visible intensity of the bottom radial glow.
     * 100 = full glowColor, 0 = invisible. Defaults to 100.
     */
    glowIntensity?: number;
    className?: string;
}
/**
 * 3D perspective grid background using CSS transforms
 */
declare function PerspectiveGrid({ glowColor: glowColorProp, lineColor: lineColorProp, prominentGlow, lineIntensity, glowIntensity, className }: PerspectiveGridProps): React$1.JSX.Element;

interface RadiantGlowProps {
    /** Override the glow color. Defaults to var(--color-primary). */
    color?: string;
    /** Overall opacity multiplier (0-1). Defaults to 1. */
    opacity?: number;
    className?: string;
}
/**
 * Ambient primary-colored radiant glow background.
 * Renders soft, slowly drifting radial gradients using the active theme's primary color.
 * Designed to sit alongside PerspectiveGrid at the same z-level.
 */
declare function RadiantGlow({ color, opacity, className }: RadiantGlowProps): React$1.JSX.Element;

interface VignetteProps {
    /** How far the darkening extends inward (0-1). Defaults to 0.35. */
    strength?: number;
    className?: string;
}
/**
 * Radial vignette overlay — darkens the edges of the viewport
 * to draw focus toward the center content.
 */
declare function Vignette({ strength, className }: VignetteProps): React$1.JSX.Element;

declare const AppShellContainer: ({ children }: {
    children: React.ReactNode;
}) => react_jsx_runtime.JSX.Element;
declare const AppShellRightSideContainer: ({ children }: {
    children: React.ReactNode;
}) => react_jsx_runtime.JSX.Element;
interface AppShellContentContainerProps {
    children: React.ReactNode;
}
declare const AppShellRightSideOuterContainer: ({ children }: AppShellContentContainerProps) => react_jsx_runtime.JSX.Element;
declare const AppShellContentContainer: ({ children }: AppShellContentContainerProps) => react_jsx_runtime.JSX.Element;

interface PageContainerProps {
    children: React.ReactNode;
}
declare const PageContainer: ({ children }: PageContainerProps) => react_jsx_runtime.JSX.Element;

interface AppTopbarAdjusterWrapperProps {
    children: React.ReactNode;
}
declare const AppTopbarAdjusterWrapper: ({ children }: AppTopbarAdjusterWrapperProps) => react_jsx_runtime.JSX.Element;

declare const AppShellCenteredContainer: ({ children }: {
    children: React.ReactNode;
}) => react_jsx_runtime.JSX.Element;
declare const AppShellLoader: () => react_jsx_runtime.JSX.Element;
declare const AppShellError: ({ message, retry }: {
    message: string;
    retry?: () => void;
}) => react_jsx_runtime.JSX.Element;

interface LinkItem {
    label: string;
    link: string;
    onClick?: () => void;
    /** Optional tour target ID for onboarding highlights on sub-links. */
    dataOnboardingTourId?: string;
    /** When true, only mark active on exact path match (not on prefix). Used when a sibling has a more-specific sub-path. */
    exact?: boolean;
    /**
     * Additional path prefixes that mark this link active. Useful when a hub link
     * (e.g. `/sales`) should also light up while the user is on a sibling route
     * (e.g. `/lead-gen` or `/crm`) handled by the same subshell.
     */
    activeMatchPaths?: string[];
}
interface LinksGroupProps {
    icon: React$1.ComponentType<{
        size?: number;
        stroke?: number;
    }>;
    label: string;
    initiallyOpened?: boolean;
    links?: LinkItem[];
    link?: string;
    onClick?: () => void;
    currentPath?: string;
    opened?: boolean;
    onToggle?: () => void;
    /** Optional tour target ID for onboarding highlights */
    dataOnboardingTourId?: string;
}

declare const LinksGroup: React$1.FC<LinksGroupProps>;

interface SidebarNestedProps {
    links: LinksGroupProps[];
    user?: {
        firstName: string | null;
        lastName: string | null;
        email: string;
        profilePictureUrl?: string | null;
    };
    onLogout?: () => void;
    onAccountClick?: () => void;
    className?: string;
    logo?: string;
}
declare const Sidebar: React$1.FC<SidebarNestedProps>;

interface SidebarContextType {
    expandedGroups: Record<string, boolean>;
    toggleGroup: (groupLabel: string) => void;
    initializeGroups: (groups: Array<{
        label: string;
        initiallyOpened?: boolean;
    }>) => void;
    isCollapsed: boolean;
    toggleCollapsed: () => void;
    setCollapsed: (value: boolean) => void;
}
declare const SidebarContext: React$1.Context<SidebarContextType | undefined>;
interface SidebarProviderProps {
    children: ReactNode;
}
declare const SidebarProvider: React$1.FC<SidebarProviderProps>;
declare const useSidebar: () => SidebarContextType;

declare const useSidebarCollapse: () => {
    isCollapsed: boolean;
    toggleCollapsed: () => void;
    setCollapsed: (value: boolean) => void;
};

interface CollapsibleSidebarGroupProps {
    /** Icon component to display */
    icon: ComponentType<{
        size?: number;
        color?: string;
    }>;
    /** Group label text */
    label: string;
    /** Whether the group is expanded */
    isExpanded: boolean;
    /** Callback when toggle is clicked */
    onToggle: () => void;
    /** Whether this group has an active child (used when collapsed) */
    isActive?: boolean;
    /** Optional badge content (right side) */
    badge?: ReactNode;
    /** Children to render when expanded */
    children: ReactNode;
    /** Optional click handler for the label/icon (separate from toggle) */
    onLabelClick?: () => void;
    /** Empty state message when no children */
    emptyMessage?: string;
    /** Whether children list is empty */
    isEmpty?: boolean;
    /** Whether loading */
    isLoading?: boolean;
    /** Loading component to render */
    loadingComponent?: ReactNode;
}
/**
 * CollapsibleSidebarGroup - Reusable collapsible group for sidebar navigation
 *
 * Consolidates the expand/collapse pattern from:
 * - DevResourceGroup (ResourcesSidebar)
 * - ProjectGroup (CalibrationSidebar)
 *
 * @example
 * ```tsx
 * <CollapsibleSidebarGroup
 *   icon={IconFlask}
 *   label="My Project"
 *   isExpanded={expanded}
 *   onToggle={() => setExpanded(!expanded)}
 *   badge={<Badge size="xs">WORKFLOW</Badge>}
 * >
 *   {items.map(item => <SubshellNavItem key={item.id} ... />)}
 * </CollapsibleSidebarGroup>
 * ```
 */
declare const CollapsibleSidebarGroup: React$1.FC<CollapsibleSidebarGroupProps>;

interface SubshellContainerProps {
    children: React$1.ReactNode;
    className?: string;
}
declare const SubshellContainer: ({ children, className }: SubshellContainerProps) => react_jsx_runtime.JSX.Element;
interface SubshellRightSideContainerProps {
    children: React$1.ReactNode;
    className?: string;
}
declare const SubshellRightSideContainer: ({ children, className }: SubshellRightSideContainerProps) => react_jsx_runtime.JSX.Element;
interface SubshellContentContainerProps {
    children: React$1.ReactNode;
    className?: string;
}
declare const SubshellContentContainer: ({ children, className }: SubshellContentContainerProps) => react_jsx_runtime.JSX.Element;
interface SubshellSidebarContainerProps {
    children: React$1.ReactNode;
    className?: string;
    width?: number;
}

interface SubshellSidebarProps {
    children: React$1.ReactNode;
    className?: string;
    width?: number;
    collapsible?: boolean;
    defaultOpen?: boolean;
}
declare const SubshellSidebar: React$1.FC<SubshellSidebarProps>;

interface SubshellNavItemProps {
    icon: ComponentType<{
        size?: number;
        style?: React$1.CSSProperties;
    }>;
    label: string;
    isActive?: boolean;
    onClick: () => void;
    description?: string;
    badge?: ReactNode;
    disabled?: boolean;
    /**
     * When provided, the item renders as an anchor (`<a href>`) so the browser
     * exposes "Open in new tab" / cmd-click behavior. Plain left-clicks still
     * trigger SPA navigation via `onClick` (default is prevented).
     */
    href?: string;
}
declare const SubshellNavItem: React$1.FC<SubshellNavItemProps>;

/**
 * Shared nav-item shape used by feature sidebar middle components.
 *
 * Matches the subset of {@link SubshellNavItemProps} that the existing
 * hardcoded item arrays use. Consumers import this type alongside the
 * exported item arrays (e.g. `CRM_ITEMS`) to type their custom arrays.
 *
 * @example
 * import { NavItem, CRM_ITEMS } from '@elevasis/ui/features/crm'
 *
 * const customItems: NavItem[] = [
 *   ...CRM_ITEMS,
 *   { label: 'Reports', to: '/crm/reports', icon: IconFileText, exact: false },
 * ]
 */
interface NavItem {
    /** Display label for the nav entry. */
    label: string;
    /** Route path the item links to. */
    to: string;
    /** Tabler icon component (or any component accepting `size` + `style`). */
    icon: ComponentType<{
        size?: number;
        style?: React.CSSProperties;
    }>;
    /**
     * When `true`, the item is only active when the path matches exactly.
     * When `false`, it is active for any path that starts with `to`.
     */
    exact: boolean;
}

interface SubshellNavListProps {
    /** Array of nav items to render. */
    items: NavItem[];
}
/**
 * Renders a list of {@link NavItem} entries as {@link SubshellNavItem} components,
 * deriving active state from the current router path via {@link useRouterContext}.
 *
 * Use this when composing a custom sidebar middle that needs to render one of the
 * exported item arrays (e.g. `CRM_ITEMS`, `DELIVERY_PROJECT_ITEMS`) inside a
 * custom layout.
 *
 * @example
 * import { SubshellNavList, SubshellSidebarSection } from '@elevasis/ui/layout'
 * import { CRM_ITEMS } from '@elevasis/ui/features/crm'
 *
 * const MyCrmMiddle = () => (
 *   <Stack gap={0} style={{ flex: 1, overflowY: 'auto' }}>
 *     <Stack gap={0} p="sm">
 *       <SubshellNavList items={CRM_ITEMS} />
 *     </Stack>
 *   </Stack>
 * )
 */
declare const SubshellNavList: React$1.FC<SubshellNavListProps>;

interface SubshellSidebarSectionProps {
    /** Icon component to display on the left */
    icon: ComponentType<{
        size?: number;
        color?: string;
        stroke?: number;
    }>;
    /** Section label text */
    label: string;
    /** Optional content rendered on the right side of the header */
    rightSection?: ReactNode;
    /** Whether to show a top border (use for divider sections, not the first header) */
    withTopBorder?: boolean;
}
/**
 * SubshellSidebarSection - Labeled section header for subshell sidebars.
 *
 * Used for both the top module header (no top border) and internal section
 * dividers (with top border) in subshell sidebars like Acquisition and SEO.
 *
 * @example
 * // Module header (top of sidebar)
 * <SubshellSidebarSection icon={IconTarget} label="Acquisition" />
 *
 * // Divider between nav groups
 * <SubshellSidebarSection icon={IconPencil} label="Content Management" withTopBorder />
 *
 * // With right-side controls
 * <SubshellSidebarSection icon={IconPencil} label="Content Management" withTopBorder rightSection={<Button size="xs">Add</Button>} />
 */
declare const SubshellSidebarSection: React$1.FC<SubshellSidebarSectionProps>;

declare const subsidebarWidth = 200;

declare function SubshellLoader(): react_jsx_runtime.JSX.Element;

interface SubshellSidebarLoaderProps {
    padding?: MantineSpacing;
}
/**
 * Centers the active appearance loader within the remaining sidebar body.
 *
 * Use this for subshell sidebar loading states instead of hand-rolled
 * `<Center><Loader /></Center>` blocks so all sidebars align consistently.
 */
declare function SubshellSidebarLoader({ padding }: SubshellSidebarLoaderProps): react_jsx_runtime.JSX.Element;

interface TopbarProps {
    version: string;
    /** Content to render on the left side of the topbar (e.g., breadcrumbs) */
    leftContent?: React.ReactNode;
    /** Optional children to render before theme switcher */
    children?: React.ReactNode;
}
declare const Topbar: ({ version, leftContent, children }: TopbarProps) => react_jsx_runtime.JSX.Element;

interface TopbarActionsProps {
    isPlatformAdmin?: boolean;
    isDev?: boolean;
}
/**
 * Renders all OM-declared topbar actions visible to the current user.
 *
 * Reads `navigation.topbar` from the organization model via `ElevasisSystemsProvider`,
 * applies gating (enabled / devOnly / requiresAdmin), joins each surviving node to its
 * registered `TopbarActionModule`, and delegates rendering to the module's `render` callback.
 *
 * Place inside an `AppTopbar` next to other topbar controls. Requires
 * `ElevasisSystemsProvider` in the tree with `topbarActions` registered.
 */
declare function TopbarActions({ isPlatformAdmin, isDev }: TopbarActionsProps): react_jsx_runtime.JSX.Element;

declare const TopbarContainer: ({ children }: {
    children: React.ReactNode;
}) => react_jsx_runtime.JSX.Element;

export { AmbientBloomGrid, AppBackground, AppShellCenteredContainer, AppShellContainer, AppShellContentContainer, AppShellError, AppShellLoader, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, CyberBackground, CyberParticles, FilmGrain, FloatingMotes, FloatingOrbs, LinksGroup, PageContainer, PerspectiveGrid, RadiantGlow, Sidebar, SidebarContext, SidebarProvider, SubshellContainer, SubshellContentContainer, SubshellLoader, SubshellNavItem, SubshellNavList, SubshellRightSideContainer, SubshellSidebar, SubshellSidebarLoader, SubshellSidebarSection, Topbar, TopbarActions, TopbarContainer, Vignette, WaveBackground, sidebarBottomSectionCollapsedHeight, sidebarBottomSectionHeight, sidebarCollapsedWidth, sidebarGroupChevronSize, sidebarHoverDelay, sidebarIconInnerSize, sidebarIconSize, sidebarIconStroke, sidebarItemGap, sidebarItemHeight, sidebarItemPadding, sidebarSectionPadding, sidebarSubLinkIndent, sidebarSubLinkPaddingX, sidebarSubLinkPaddingY, sidebarToggleIconSize, sidebarTransitionDuration, sidebarWidth, subshellNavItemIconSize, subsidebarWidth, topbarHeight, useSidebar, useSidebarCollapse };
export type { CollapsibleSidebarGroupProps, CyberVariant, LinkItem, LinksGroupProps, NavItem, SidebarNestedProps, SubshellContainerProps, SubshellContentContainerProps, SubshellNavItemProps, SubshellNavListProps, SubshellRightSideContainerProps, SubshellSidebarContainerProps, SubshellSidebarLoaderProps, SubshellSidebarProps, SubshellSidebarSectionProps, TopbarActionsProps, TopbarProps, WaveVariant };
