@camunda/camunda-composite-components 0.22.7 → 0.23.0

package/lib/esm/src/components/c3-navigation-v2/c3-navigation-v2.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Header, HeaderGlobalAction, HeaderGlobalBar, SkipToContent, } from '@carbon/react';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+import { CamundaLogo } from '../../assets/c3-icons.js';
+import { C3BreadcrumbBar } from './c3-breadcrumb-bar.js';
+import { C3Sidebar } from './c3-sidebar.js';
+import { C3ToolsArea } from './c3-tools-area.js';
+const StyledHeader = styled(Header) `
+  background-color: var(--cds-layer-01) !important;
+  border-bottom: 1px solid var(--cds-border-subtle) !important;
+  box-shadow: none !important;
+  z-index: 8001 !important;
+`;
+const LogoSection = styled.a `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  flex-shrink: 0;
+  gap: 0.5rem;
+  border-right: 1px solid var(--cds-border-subtle);
+  height: 100%;
+  text-decoration: none;
+  color: var(--cds-text-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+`;
+/**
+ * Sets CSS custom properties on :root so consumers can derive layout offsets
+ * without hard-coding pixel values:
+ *   --c3-header-height: height of the fixed header (always 3rem)
+ *   --c3-sidebar-width: current sidebar width (updates on expand/collapse)
+ */
+export const C3NavigationV2 = ({ app, skipToContentTargetId, skipToContentLabel = 'Skip to main content', headerAriaLabel, breadcrumbs, tools, globalActions, sidebar, linkComponent, headerTrailingContent, activeToolKey, onActiveToolChange, }) => {
+    const ariaLabel = headerAriaLabel ?? app.ariaLabel;
+    const LinkEl = linkComponent ?? 'a';
+    const sidebarWidth = sidebar
+        ? sidebar.isExpanded
+            ? (sidebar.expandedWidth ?? '16rem')
+            : (sidebar.collapsedWidth ?? '3rem')
+        : '0px';
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        root.style.setProperty('--c3-header-height', '3rem');
+        root.style.setProperty('--c3-sidebar-width', sidebarWidth);
+        return () => {
+            root.style.removeProperty('--c3-header-height');
+            root.style.removeProperty('--c3-sidebar-width');
+        };
+    }, [sidebarWidth]);
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledHeader, { "aria-label": ariaLabel, children: [_jsx(SkipToContent, { href: `#${skipToContentTargetId}`, children: skipToContentLabel }), _jsxs(LogoSection, { as: app.linkProps ? LinkEl : 'div', ...(app.linkProps ?? {}), children: [_jsx(CamundaLogo, { "aria-label": 'Camunda' }), app.name && _jsx("span", { children: app.name })] }), breadcrumbs && breadcrumbs.length > 0 && (_jsx(C3BreadcrumbBar, { segments: breadcrumbs, linkComponent: LinkEl })), _jsxs(HeaderGlobalBar, { children: [headerTrailingContent && (_jsx("span", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    padding: '0 0.5rem',
+                                }, children: headerTrailingContent })), tools && tools.length > 0 && (_jsx(C3ToolsArea, { tools: tools, activeToolKey: activeToolKey, onActiveToolChange: onActiveToolChange })), globalActions?.map((action, index) => {
+                                if (action.element) {
+                                    return _jsx("span", { children: action.element }, action.key);
+                                }
+                                const Icon = action.icon;
+                                const isLast = index === (globalActions?.length ?? 0) - 1;
+                                return (_jsx(HeaderGlobalAction, { "aria-label": action.label, onClick: action.onClick, tooltipAlignment: isLast ? 'end' : undefined, children: _jsx(Icon, { size: 20 }) }, action.key));
+                            })] })] }), sidebar && _jsx(C3Sidebar, { ...sidebar })] }));
+};

package/lib/esm/src/components/c3-navigation-v2/c3-navigation-v2.types.d.ts

@@ -0,0 +1,180 @@
+import type { ReactNode } from 'react';
+/**
+ * Describes a tool button in the header. If `panel` is provided, clicking the
+ * button toggles a slide-over panel. Without `panel`, the button is standalone.
+ */
+export interface ToolDescriptor {
+    key: string;
+    label: string;
+    renderButton: (props: {
+        onClick: () => void;
+        isActive: boolean;
+    }) => ReactNode;
+    panel?: ReactNode;
+}
+export interface LinkProps {
+    /** Route path for client-side navigation (e.g. react-router `to`). */
+    to?: string;
+    /** Standard anchor href for external or full-page navigation. */
+    href?: string;
+    [key: string]: unknown;
+}
+type IconComponent = React.ComponentType<{
+    size?: number;
+    style?: React.CSSProperties;
+}>;
+export type LinkComponent = React.ComponentType<LinkProps & React.RefAttributes<HTMLAnchorElement>> | string;
+export interface BreadcrumbDropdownItem {
+    key: string;
+    label: string;
+    icon?: IconComponent;
+    isSelected?: boolean;
+    onClick?: () => void;
+    linkProps?: LinkProps;
+    trailingElement?: ReactNode;
+}
+export interface BreadcrumbAction {
+    key: string;
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    isDanger?: boolean;
+    hasDivider?: boolean;
+}
+/**
+ * `linkProps` and `onClick` may coexist: the segment renders as a link
+ * (native navigation + middle-click / new tab support) and `onClick` fires
+ * on activation — useful for analytics or side-effects alongside navigation.
+ * When only `onClick` is set, the segment renders as a button.
+ */
+export interface BreadcrumbSegment {
+    key: string;
+    label: string;
+    icon?: IconComponent;
+    onClick?: () => void;
+    linkProps?: LinkProps;
+    trailingElement?: ReactNode;
+    /** Rendered as a sibling next to the segment button (not inside it). Use for overflow menus etc. */
+    menuElement?: ReactNode;
+    /**
+     * Action items rendered as a triple-dot overflow menu beside the segment.
+     * Can coexist with `dropdownItems`; both render side-by-side
+     * (actions as an overflow menu, dropdown as a chevron selector).
+     */
+    actions?: BreadcrumbAction[];
+    /**
+     * Items for a chevron-triggered dropdown selector beside the segment.
+     * Can coexist with `actions`; both render side-by-side
+     * (dropdown as a chevron selector, actions as an overflow menu).
+     */
+    dropdownItems?: BreadcrumbDropdownItem[];
+    dropdownTitle?: string;
+    dropdownAriaLabel?: string;
+}
+export interface GlobalActionButton {
+    key: string;
+    label: string;
+    icon: React.ComponentType<{
+        size?: number;
+    }>;
+    onClick?: () => void;
+    element?: ReactNode;
+}
+export interface SidebarItem {
+    type: 'item';
+    key: string;
+    label: string;
+    icon: IconComponent;
+    isActive?: boolean;
+    onClick?: () => void;
+    linkProps?: LinkProps;
+    trailingElement?: ReactNode;
+}
+/**
+ * A sidebar node that is both navigable and expandable: clicking the label
+ * navigates (via `onClick` / `linkProps`), and a separate chevron toggles
+ * the nested `children`. Use when the parent itself has a destination —
+ * e.g. a "Projects" item that both navigates to the project list and
+ * expands to show recent projects.
+ */
+export interface SidebarGroupItem {
+    type: 'group-item';
+    key: string;
+    label: string;
+    icon: IconComponent;
+    isActive?: boolean;
+    onClick?: () => void;
+    linkProps?: LinkProps;
+    trailingElement?: ReactNode;
+    isExpanded?: boolean;
+    onToggleExpand?: () => void;
+    children: SidebarNode[];
+}
+/**
+ * A sidebar node that is only a container: clicking it expands/collapses
+ * its `children`, and it has no destination of its own. Use when the
+ * parent is a pure grouping label — e.g. "Administration" with child items
+ * for users, roles, settings.
+ */
+export interface SidebarGroup {
+    type: 'group';
+    key: string;
+    label: string;
+    icon: IconComponent;
+    trailingElement?: ReactNode;
+    isExpanded?: boolean;
+    onToggleExpand?: () => void;
+    children: SidebarNode[];
+}
+export interface SidebarSection {
+    type: 'section';
+    key: string;
+    title?: string;
+    children: SidebarNode[];
+    /**
+     * Compact sections render flush: no own divider or spacing. The next section
+     * still gets its divider but without the usual top margin.
+     * Use for action rows like "Back to home" at the top of the sidebar.
+     */
+    compact?: boolean;
+}
+export type SidebarNode = SidebarItem | SidebarGroupItem | SidebarGroup | SidebarSection;
+export interface SidebarProps {
+    ariaLabel: string;
+    children: SidebarNode[];
+    isExpanded?: boolean;
+    onToggleExpanded?: () => void;
+    expandedWidth?: string;
+    collapsedWidth?: string;
+    linkComponent?: LinkComponent;
+}
+export interface AppProps {
+    name?: string;
+    ariaLabel: string;
+    linkProps?: LinkProps;
+}
+export interface C3NavigationV2Props {
+    app: AppProps;
+    /**
+     * `id` of the page's main content element (e.g. `<main id="...">`). The skip
+     * link points at `#${skipToContentTargetId}`, so the element must exist and
+     * be focusable (`tabindex="-1"` if not natively focusable). Required — the
+     * consuming app is responsible for the target; a missing id makes the skip
+     * link a dead Tab stop.
+     */
+    skipToContentTargetId: string;
+    skipToContentLabel?: string;
+    headerAriaLabel?: string;
+    breadcrumbs?: BreadcrumbSegment[];
+    tools?: ToolDescriptor[];
+    globalActions?: GlobalActionButton[];
+    sidebar?: SidebarProps;
+    linkComponent?: LinkComponent;
+    /** Content rendered in the right-aligned header area, before the tool buttons. Use for license tags, environment badges, etc. */
+    headerTrailingContent?: ReactNode;
+    /** Currently active tool panel key (controlled). When omitted, C3ToolsArea manages its own state. */
+    activeToolKey?: string | null;
+    /** Called when the active tool panel changes (including close via outside click). */
+    onActiveToolChange?: (key: string | null) => void;
+}
+export {};

package/lib/esm/src/components/c3-navigation-v2/c3-navigation-v2.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/src/components/c3-navigation-v2/c3-sidebar.d.ts

@@ -0,0 +1,8 @@
+import { type JSX } from 'react';
+import type { SidebarProps } from './c3-navigation-v2.types';
+/**
+ * Sidebar navigation panel. Children are `SidebarNode[]`, typically sections.
+ * Loose items (not wrapped in a section) are valid and behave as an implicit
+ * untitled group at the top.
+ */
+export declare const C3Sidebar: ({ ariaLabel, children: nodes, isExpanded, onToggleExpanded, expandedWidth, collapsedWidth, linkComponent, }: SidebarProps) => JSX.Element;

package/lib/esm/src/components/c3-navigation-v2/c3-sidebar.js

@@ -0,0 +1,357 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Popover, PopoverContent } from '@carbon/react';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from '@carbon/react/icons/index.esm.js';
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+const SidebarNav = styled.nav `
+  position: fixed;
+  top: 3rem;
+  left: 0;
+  bottom: 0;
+  width: ${(p) => p.$width};
+  background: var(--cds-layer-01);
+  border-right: 1px solid var(--cds-border-subtle);
+  display: flex;
+  flex-direction: column;
+  transition: width 0.15s ease-out;
+  z-index: 8000;
+`;
+const ScrollArea = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: ${(p) => (p.$sidebarExpanded ? 'auto' : 'visible')};
+  overflow-x: ${(p) => (p.$sidebarExpanded ? 'hidden' : 'visible')};
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
+`;
+const NavButton = styled.button `
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 2.5rem;
+  padding: ${(p) => {
+    if (p.$depth > 0)
+        return `0.625rem 1rem 0.625rem ${0.75 + p.$depth * 1.75}rem`;
+    return p.$isExpanded ? '0.75rem 1rem' : '0.75rem';
+}};
+  justify-content: ${(p) => (p.$isExpanded ? 'flex-start' : 'center')};
+  background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'transparent')};
+  border: none;
+  border-left: ${(p) => (p.$isActive ? '3px solid var(--cds-border-interactive)' : '3px solid transparent')};
+  cursor: pointer;
+  color: ${(p) => (p.$isActive ? 'var(--cds-text-primary)' : 'var(--cds-text-secondary)')};
+  font-size: 0.875rem;
+  font-weight: ${(p) => (p.$isActive ? 500 : 400)};
+  text-align: left;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: background 0.15s, color 0.15s;
+
+  &:hover {
+    background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'var(--cds-layer-hover)')};
+    color: var(--cds-text-primary);
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const NavLabel = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const GroupHeader = styled.div `
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  width: 100%;
+  min-height: 2.5rem;
+  overflow: hidden;
+  background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'transparent')};
+  border-left: ${(p) => (p.$isActive ? '3px solid var(--cds-border-interactive)' : '3px solid transparent')};
+  transition: background 0.15s, color 0.15s;
+
+  &:hover:not(:has(button[data-expand]:hover)) {
+    background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'var(--cds-layer-hover)')};
+  }
+`;
+const GroupLabelButton = styled.button `
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: ${(p) => {
+    if (p.$depth > 0)
+        return `0.75rem 0 0.75rem ${0.75 + p.$depth * 1.75}rem`;
+    return '0.75rem 0 0.75rem 1rem';
+}};
+  background: transparent;
+  border: none;
+  cursor: ${(p) => (p.$isClickable ? 'pointer' : 'default')};
+  color: ${(p) => (p.$isActive ? 'var(--cds-text-primary)' : 'var(--cds-text-secondary)')};
+  font-size: 0.875rem;
+  font-weight: ${(p) => (p.$isActive ? 500 : 400)};
+  text-align: left;
+  text-decoration: none;
+  transition: color 0.15s;
+  gap: 0.75rem;
+
+  &:hover {
+    color: var(--cds-text-primary);
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const ExpandButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  margin-right: 0.75rem;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--cds-icon-secondary);
+  transition: background 0.15s;
+
+  &:hover {
+    background: var(--cds-layer-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const PlainGroupHeader = styled.div `
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  width: 100%;
+  min-height: 2.5rem;
+  overflow: hidden;
+  border-left: 3px solid transparent;
+`;
+const PlainGroupLabel = styled.span `
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: ${(p) => {
+    if (p.$depth > 0)
+        return `0.75rem 0 0.75rem ${0.75 + p.$depth * 1.75}rem`;
+    return '0.75rem 0 0.75rem 1rem';
+}};
+  gap: 0.75rem;
+  color: var(--cds-text-secondary);
+  font-size: 0.875rem;
+  font-weight: 400;
+`;
+const PlainGroupExpandButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  margin-right: 0.75rem;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--cds-icon-secondary);
+  transition: background 0.15s;
+
+  &:hover {
+    background: var(--cds-layer-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const StyledPopover = styled(Popover) `
+  display: block;
+
+  .cds--popover-content {
+    pointer-events: none;
+    padding: 0.1875rem 0.5rem;
+    font-size: var(--cds-body-compact-01-font-size);
+    white-space: nowrap;
+  }
+`;
+const CollapsedItemTooltip = ({ label, children, }) => {
+    const [open, setOpen] = useState(false);
+    const timerRef = useRef(null);
+    const handleMouseEnter = () => {
+        timerRef.current = setTimeout(() => setOpen(true), 150);
+    };
+    const handleMouseLeave = () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        setOpen(false);
+    };
+    useEffect(() => () => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+    }, []);
+    return (_jsxs(StyledPopover, { open: open, align: 'right', highContrast: true, dropShadow: false, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, _jsx(PopoverContent, { children: label })] }));
+};
+const SectionDivider = styled.div `
+  border-top: ${(p) => (p.$hideTopDivider ? 'none' : '1px solid var(--cds-border-subtle)')};
+  margin-top: ${(p) => {
+    if (p.$eatScrollPadding)
+        return '-0.5rem';
+    if (p.$tight)
+        return '0';
+    return p.$hideTopDivider ? '0' : '0.5rem';
+}};
+  padding-top: ${(p) => (p.$hideTopDivider ? '0' : '0.5rem')};
+`;
+const SectionTitle = styled.div `
+  padding: 0.5rem 1rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cds-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+`;
+const CollapseToggleArea = styled.div `
+  border-top: 1px solid var(--cds-border-subtle);
+  background: var(--cds-layer-01);
+`;
+const CollapseButton = styled.button `
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 2.5rem;
+  padding: ${(p) => (p.$isExpanded ? '0.75rem 1rem' : '0.75rem')};
+  justify-content: ${(p) => (p.$isExpanded ? 'flex-start' : 'center')};
+  background: transparent;
+  border: none;
+  border-left: 3px solid transparent;
+  cursor: pointer;
+  color: var(--cds-text-secondary);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: background 0.15s, color 0.15s, padding 0.15s ease-out;
+
+  &:hover {
+    background: var(--cds-layer-hover);
+    color: var(--cds-text-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const resolveLinkAs = (linkProps, linkComponent) => {
+    if (!linkProps)
+        return undefined;
+    if ('href' in linkProps)
+        return 'a';
+    return linkComponent;
+};
+const ItemNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
+    const Icon = node.icon;
+    const content = (_jsxs(NavButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": !!node.isActive, "$isExpanded": sidebarExpanded, "$depth": depth, onClick: node.onClick, "aria-current": node.isActive ? 'page' : undefined, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), sidebarExpanded && _jsx(NavLabel, { children: node.label }), sidebarExpanded && node.trailingElement] }));
+    if (!sidebarExpanded) {
+        return (_jsx(CollapsedItemTooltip, { label: node.label, children: content }));
+    }
+    return content;
+};
+const GroupItemNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
+    const Icon = node.icon;
+    const isActive = !!node.isActive;
+    if (!sidebarExpanded) {
+        const collapsed = (_jsx(NavButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": isActive, "$isExpanded": false, "$depth": 0, onClick: node.onClick ?? node.onToggleExpand, "aria-current": isActive ? 'page' : undefined, children: _jsx(Icon, { size: 20, style: { flexShrink: 0 } }) }));
+        return (_jsx(CollapsedItemTooltip, { label: node.label, children: collapsed }));
+    }
+    return (_jsxs("div", { children: [_jsxs(GroupHeader, { "$isActive": isActive, "$depth": depth, children: [_jsxs(GroupLabelButton, { as: resolveLinkAs(node.linkProps, linkComponent), ...(node.linkProps ?? {}), "$isActive": isActive, "$isClickable": true, "$depth": depth, onClick: node.onClick, "aria-current": isActive ? 'page' : undefined, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && (_jsx(ExpandButton, { "data-expand": true, onClick: (e) => {
+                            e.stopPropagation();
+                            node.onToggleExpand?.();
+                        }, "aria-label": node.isExpanded
+                            ? `Collapse ${node.label}`
+                            : `Expand ${node.label}`, "aria-expanded": !!node.isExpanded, children: node.isExpanded ? (_jsx(ChevronUp, { size: 16 })) : (_jsx(ChevronDown, { size: 16 })) }))] }), node.isExpanded &&
+                node.children.map((child) => (_jsx(SidebarNodeComponent, { node: child, sidebarExpanded: sidebarExpanded, depth: depth + 1, linkComponent: linkComponent }, child.key)))] }));
+};
+const GroupNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
+    const Icon = node.icon;
+    if (!sidebarExpanded) {
+        const collapsed = (_jsx(NavButton, { "$isActive": false, "$isExpanded": false, "$depth": 0, onClick: node.onToggleExpand, children: _jsx(Icon, { size: 20, style: { flexShrink: 0 } }) }));
+        return (_jsx(CollapsedItemTooltip, { label: node.label, children: collapsed }));
+    }
+    return (_jsxs("div", { children: [_jsxs(PlainGroupHeader, { "$depth": depth, children: [_jsxs(PlainGroupLabel, { "$depth": depth, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && (_jsx(PlainGroupExpandButton, { onClick: node.onToggleExpand, "aria-label": node.isExpanded
+                            ? `Collapse ${node.label}`
+                            : `Expand ${node.label}`, "aria-expanded": !!node.isExpanded, children: node.isExpanded ? (_jsx(ChevronUp, { size: 16 })) : (_jsx(ChevronDown, { size: 16 })) }))] }), node.isExpanded &&
+                node.children.map((child) => (_jsx(SidebarNodeComponent, { node: child, sidebarExpanded: sidebarExpanded, depth: depth + 1, linkComponent: linkComponent }, child.key)))] }));
+};
+const SectionNode = ({ node, sidebarExpanded, linkComponent, hideTopDivider, eatScrollPadding, tight, }) => (_jsxs(SectionDivider, { "$hideTopDivider": hideTopDivider, "$eatScrollPadding": eatScrollPadding, "$tight": tight, children: [sidebarExpanded && node.title && _jsx(SectionTitle, { children: node.title }), node.children.map((child) => (_jsx(SidebarNodeComponent, { node: child, sidebarExpanded: sidebarExpanded, depth: 0, linkComponent: linkComponent }, child.key)))] }));
+const SidebarNodeComponent = ({ node, sidebarExpanded, depth, linkComponent, hideTopDivider = false, eatScrollPadding = false, tight = false, }) => {
+    if (node.type === 'section') {
+        if (depth !== 0) {
+            console.error(`[C3Sidebar] Section "${node.key}" must be at the root level (depth 0), found at depth ${depth}.`);
+            return null;
+        }
+        return (_jsx(SectionNode, { node: node, sidebarExpanded: sidebarExpanded, linkComponent: linkComponent, hideTopDivider: hideTopDivider, eatScrollPadding: eatScrollPadding, tight: tight }));
+    }
+    if (node.type === 'group-item') {
+        return (_jsx(GroupItemNode, { node: node, sidebarExpanded: sidebarExpanded, depth: depth, linkComponent: linkComponent }));
+    }
+    if (node.type === 'group') {
+        return (_jsx(GroupNode, { node: node, sidebarExpanded: sidebarExpanded, depth: depth, linkComponent: linkComponent }));
+    }
+    return (_jsx(ItemNode, { node: node, sidebarExpanded: sidebarExpanded, depth: depth, linkComponent: linkComponent }));
+};
+/**
+ * Sidebar navigation panel. Children are `SidebarNode[]`, typically sections.
+ * Loose items (not wrapped in a section) are valid and behave as an implicit
+ * untitled group at the top.
+ */
+export const C3Sidebar = ({ ariaLabel, children: nodes, isExpanded = true, onToggleExpanded, expandedWidth = '16rem', collapsedWidth = '3rem', linkComponent, }) => {
+    const width = isExpanded ? expandedWidth : collapsedWidth;
+    return (_jsxs(SidebarNav, { "$width": width, "aria-label": ariaLabel, children: [_jsx(ScrollArea, { "$sidebarExpanded": isExpanded, children: (() => {
+                    let sectionSeen = false;
+                    let prevSectionCompact = false;
+                    let hasNonSectionNodes = false;
+                    return nodes.map((node) => {
+                        let hideTopDivider = false;
+                        let eatScrollPadding = false;
+                        let tight = false;
+                        if (node.type === 'section') {
+                            const isFirst = !sectionSeen;
+                            hideTopDivider =
+                                (isFirst && !hasNonSectionNodes) || !!node.compact;
+                            eatScrollPadding =
+                                isFirst && !hasNonSectionNodes && !!node.compact;
+                            tight = prevSectionCompact;
+                            sectionSeen = true;
+                            prevSectionCompact = !!node.compact;
+                        }
+                        else {
+                            hasNonSectionNodes = true;
+                        }
+                        return (_jsx(SidebarNodeComponent, { node: node, sidebarExpanded: isExpanded, depth: 0, linkComponent: linkComponent, hideTopDivider: hideTopDivider, eatScrollPadding: eatScrollPadding, tight: tight }, node.key));
+                    });
+                })() }), onToggleExpanded && (_jsx(CollapseToggleArea, { children: isExpanded ? (_jsxs(CollapseButton, { "$isExpanded": true, onClick: onToggleExpanded, "aria-label": 'Collapse sidebar', "aria-expanded": true, children: [_jsx(ChevronLeft, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: "Collapse" })] })) : (_jsx(CollapsedItemTooltip, { label: 'Expand', children: _jsx(CollapseButton, { "$isExpanded": false, onClick: onToggleExpanded, "aria-label": 'Expand sidebar', "aria-expanded": false, children: _jsx(ChevronRight, { size: 20, style: { flexShrink: 0 } }) }) })) }))] }));
+};

package/lib/esm/src/components/c3-navigation-v2/c3-tools-area.d.ts

@@ -0,0 +1,16 @@
+import { type JSX } from 'react';
+import type { ToolDescriptor } from './c3-navigation-v2.types';
+interface C3ToolsAreaProps {
+    tools: ToolDescriptor[];
+    /** Currently active tool key (controlled mode). When omitted, internal state is used. */
+    activeToolKey?: string | null;
+    /** Called when the active tool changes (controlled mode). */
+    onActiveToolChange?: (key: string | null) => void;
+}
+/**
+ * Renders tool buttons inline (for HeaderGlobalBar) and manages a single shared
+ * right-side panel. Opening a tool with a panel implicitly closes whatever was active.
+ * Tools without a panel are plain header buttons; their renderButton owns the onClick action.
+ */
+export declare const C3ToolsArea: ({ tools, activeToolKey: controlledKey, onActiveToolChange, }: C3ToolsAreaProps) => JSX.Element;
+export {};