@camunda/camunda-composite-components 0.23.1 → 0.23.3

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

@@ -6,11 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { HeaderGlobalAction, Tag } from '@carbon/react';
 import { Analytics, Application, ArrowLeft, Building, CloudApp, Dashboard, DataBase, Debug, Diagram, Document, Folder, Help, IbmKnowledgeCatalog, Information, Network_3, Notification, Play, Search, Security, Settings, Task, Terminal, UserAvatar, UserMultiple, Workspace, } from '@carbon/react/icons/index.esm.js';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { C3NotificationContext, } from '../../c3-navigation/c3-notification-provider/c3-notification-provider.js';
 import { C3NavigationV2 } from '../c3-navigation-v2.js';
 import { C3InfoPanel } from '../tools/c3-info-panel.js';
+import { C3NotificationsPanel } from '../tools/c3-notifications-panel.js';
 import { C3UserPanel } from '../tools/c3-user-panel.js';
 import { useC3NavigationV2 } from '../use-c3-navigation-v2.js';
+import { buildClusterSidebarEntries } from '../use-cluster-sidebar-entries.js';
 // ─── Shared layout wrapper ──────────────────────────────────────────────────
 const MainContent = ({ sidebarExpanded = true, hasSidebar = true, children }) => (_jsx("main", { id: 'main-content', style: {
         marginLeft: hasSidebar ? (sidebarExpanded ? '16rem' : '3rem') : '0',
@@ -485,6 +488,12 @@ export const ComplexTreeTemplate = () => {
 };
 // ─── Tool panels ────────────────────────────────────────────────────────────
 const createStoryTools = () => [
+    {
+        key: 'notifications',
+        label: 'Notifications',
+        renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": 'Notifications', onClick: onClick, isActive: isActive, children: _jsx(Notification, { size: 20 }) })),
+        panel: _jsx(C3NotificationsPanel, { onLinkClick: () => undefined }),
+    },
     {
         key: 'info',
         label: 'Info',
@@ -561,8 +570,271 @@ export const ToolPanelsTemplate = () => {
             },
         ],
     });
-    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Tool Panels" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["Click ", _jsx("strong", { children: "Info" }), " or ", _jsx("strong", { children: "Account" }), " in the header to open their slide-over panels. ", _jsx("strong", { children: "Help" }), " is a plain button with no panel. Click outside or click the active tool button again to close."] }), _jsx("p", { style: { marginTop: '0.5rem', color: 'var(--cds-text-secondary)' }, children: "The Account panel shows the simplified user panel: flat name/email, built-in legal links (Terms, Privacy, Imprint), and an onLogout button. Consumer-specific elements (Cookie preferences) render above the built-in links." })] })] }));
+    return (_jsxs(MockNotificationsProvider, { notifications: POPULATED_NOTIFICATIONS, children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Tool Panels" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["Click the header tool buttons to open their slide-over panels:", ' ', _jsx("strong", { children: "Notifications" }), " (seeded with a long list to show overflow + scrolling), ", _jsx("strong", { children: "Info" }), ", and", ' ', _jsx("strong", { children: "Account" }), ". ", _jsx("strong", { children: "Help" }), " is a plain button with no panel. Click outside or click the active tool button again to close."] }), _jsxs("p", { style: { marginTop: '0.5rem', color: 'var(--cds-text-secondary)' }, children: [_jsx("strong", { children: "Note:" }), " ", _jsx("code", { children: "C3NotificationsPanel" }), " reads from", ' ', _jsx("code", { children: "C3NotificationContext" }), " rather than props. This story stubs the context with static data; in SaaS consumers it is populated by", ' ', _jsx("code", { children: "C3NotificationProvider" }), " against the notifications API."] })] })] }));
+};
+// ─── Notifications mock (used by ToolPanelsTemplate) ────────────────────────
+/**
+ * `C3NotificationsPanel` reads from `C3NotificationContext` rather than props.
+ * In SaaS that context is populated by `C3NotificationProvider` against the
+ * notifications API. For Storybook we stub it with static data.
+ */
+const MockNotificationsProvider = ({ notifications: initial, children }) => {
+    const [notifications, setNotifications] = useState(initial);
+    const value = useMemo(() => ({
+        enabled: true,
+        isFetching: false,
+        notifications,
+        markAsRead: () => undefined,
+        markAllAsRead: () => undefined,
+        dismiss: (n) => setNotifications((all) => all.filter((x) => x.uuid !== n.uuid)),
+        dismissAll: () => setNotifications([]),
+        analytics: () => undefined,
+    }), [notifications]);
+    return (_jsx(C3NotificationContext.Provider, { value: value, children: children }));
 };
+const MIN_MS = 60 * 1000;
+const HOUR_MS = 60 * MIN_MS;
+const DAY_MS = 24 * HOUR_MS;
+/**
+ * ~24 notifications with varied state (new/read), length, and optional CTA
+ * metadata. Enough to overflow the panel and surface spacing / scroll issues.
+ */
+const POPULATED_NOTIFICATIONS = [
+    {
+        uuid: 'n1',
+        timestamp: Date.now() - 5 * MIN_MS,
+        source: 'modeler',
+        type: 'process-published',
+        title: 'Process application published',
+        description: 'Your "Customer Onboarding" process application was published to the production cluster.',
+        state: 'new',
+        meta: { identifier: 'proc-1', href: '#', label: 'Open in Modeler' },
+    },
+    {
+        uuid: 'n2',
+        timestamp: Date.now() - 30 * MIN_MS,
+        source: 'console',
+        type: 'cluster-ready',
+        title: 'Cluster ready',
+        description: 'The new "eu-west-1" cluster finished provisioning.',
+        state: 'new',
+        meta: { identifier: 'cluster-1', href: '#', label: 'Open cluster' },
+    },
+    {
+        uuid: 'n3',
+        timestamp: Date.now() - 1 * HOUR_MS,
+        source: 'optimize',
+        type: 'alert-triggered',
+        title: 'Alert triggered: SLA breach on Loan Approval',
+        description: 'An Optimize alert you own fired. 12 instances breached the configured 48h SLA in the last hour.',
+        state: 'new',
+        meta: { identifier: 'alert-12', href: '#', label: 'View alert' },
+    },
+    {
+        uuid: 'n4',
+        timestamp: Date.now() - 2 * HOUR_MS,
+        source: 'tasklist',
+        type: 'task-assigned',
+        title: 'Task assigned to you',
+        description: '3 new tasks in "Approvals" were assigned to you.',
+        state: 'new',
+        meta: { identifier: 'task-22', href: '#', label: 'Open Tasklist' },
+    },
+    {
+        uuid: 'n5',
+        timestamp: Date.now() - 3 * HOUR_MS,
+        source: 'modeler',
+        type: 'review-requested',
+        title: 'Review requested on "Invoice.bpmn"',
+        description: 'Julia Chen requested your review on a diagram.',
+        state: 'new',
+        meta: { identifier: 'file-9', href: '#', label: 'Open diagram' },
+    },
+    {
+        uuid: 'n6',
+        timestamp: Date.now() - 5 * HOUR_MS,
+        source: 'console',
+        type: 'cluster-upgraded',
+        title: 'Cluster upgraded',
+        description: '"prod-eu" was upgraded to 8.9.0-alpha5.',
+        state: 'read',
+        meta: { identifier: 'cluster-7', href: '#', label: 'Open cluster' },
+    },
+    {
+        uuid: 'n7',
+        timestamp: Date.now() - 8 * HOUR_MS,
+        source: 'operate',
+        type: 'incident',
+        title: 'Incident in "Order Fulfillment"',
+        description: 'An incident occurred in a running instance. Activity: "Reserve Stock".',
+        state: 'read',
+        meta: { identifier: 'inst-4711', href: '#', label: 'View incident' },
+    },
+    {
+        uuid: 'n8',
+        timestamp: Date.now() - 12 * HOUR_MS,
+        source: 'billing',
+        type: 'invoice-available',
+        title: 'Invoice available',
+        description: 'Your March invoice is ready to download.',
+        state: 'read',
+        meta: { identifier: 'inv-2026-03', href: '#', label: 'Download invoice' },
+    },
+    {
+        uuid: 'n9',
+        timestamp: Date.now() - 1 * DAY_MS,
+        source: 'optimize',
+        type: 'report-ready',
+        title: 'Weekly report ready',
+        description: 'Your scheduled Optimize report for last week is available.',
+        state: 'read',
+        meta: { identifier: 'report-42', href: '#', label: 'View report' },
+    },
+    {
+        uuid: 'n10',
+        timestamp: Date.now() - 1 * DAY_MS - 2 * HOUR_MS,
+        source: 'console',
+        type: 'cluster-paused',
+        title: 'Cluster paused',
+        description: '"dev-sandbox" was paused due to inactivity. Resume it from the console.',
+        state: 'read',
+        meta: { identifier: 'cluster-3', href: '#', label: 'Resume cluster' },
+    },
+    {
+        uuid: 'n11',
+        timestamp: Date.now() - 1 * DAY_MS - 6 * HOUR_MS,
+        source: 'modeler',
+        type: 'comment-added',
+        title: 'New comment on "Payroll.bpmn"',
+        description: 'Arvid Nielsen left a comment on task "Compute Net".',
+        state: 'read',
+        meta: { identifier: 'comment-88', href: '#', label: 'View comment' },
+    },
+    {
+        uuid: 'n12',
+        timestamp: Date.now() - 2 * DAY_MS,
+        source: 'admin',
+        type: 'role-changed',
+        title: 'Role changed',
+        description: 'Your role in "Acme Corp" changed from Developer to Admin.',
+        state: 'read',
+    },
+    {
+        uuid: 'n13',
+        timestamp: Date.now() - 2 * DAY_MS - 5 * HOUR_MS,
+        source: 'tasklist',
+        type: 'task-overdue',
+        title: 'Task overdue',
+        description: '"Review supplier contract" is overdue by 2 days.',
+        state: 'read',
+        meta: { identifier: 'task-9', href: '#', label: 'Open task' },
+    },
+    {
+        uuid: 'n14',
+        timestamp: Date.now() - 3 * DAY_MS,
+        source: 'billing',
+        type: 'plan-change',
+        title: 'Trial ending soon',
+        description: 'Your trial ends in 4 days. Upgrade now to keep access to all features, including multi-region clusters and Optimize alerts.',
+        state: 'read',
+    },
+    {
+        uuid: 'n15',
+        timestamp: Date.now() - 3 * DAY_MS - 4 * HOUR_MS,
+        source: 'modeler',
+        type: 'deployment-failed',
+        title: 'Deployment failed',
+        description: 'Deployment to "prod-eu" failed during validation. Open Modeler to inspect the errors.',
+        state: 'read',
+        meta: { identifier: 'deploy-55', href: '#', label: 'Inspect deployment' },
+    },
+    {
+        uuid: 'n16',
+        timestamp: Date.now() - 4 * DAY_MS,
+        source: 'operate',
+        type: 'instance-completed',
+        title: 'Long-running instance completed',
+        description: 'Instance 2001-001-9042 completed after 3 days.',
+        state: 'read',
+        meta: { identifier: 'inst-9042', href: '#', label: 'Open instance' },
+    },
+    {
+        uuid: 'n17',
+        timestamp: Date.now() - 5 * DAY_MS,
+        source: 'admin',
+        type: 'member-invited',
+        title: 'New member joined',
+        description: 'Priya Kapoor accepted the invitation to join "Acme Corp".',
+        state: 'read',
+    },
+    {
+        uuid: 'n18',
+        timestamp: Date.now() - 6 * DAY_MS,
+        source: 'console',
+        type: 'quota-warning',
+        title: 'Storage quota nearing limit',
+        description: 'You are using 87% of your included storage. Consider archiving old instances.',
+        state: 'read',
+    },
+    {
+        uuid: 'n19',
+        timestamp: Date.now() - 7 * DAY_MS,
+        source: 'optimize',
+        type: 'dashboard-shared',
+        title: 'Dashboard shared with you',
+        description: '"Q1 throughput" was shared with you by Miles Okonkwo.',
+        state: 'read',
+        meta: { identifier: 'dash-17', href: '#', label: 'Open dashboard' },
+    },
+    {
+        uuid: 'n20',
+        timestamp: Date.now() - 8 * DAY_MS,
+        source: 'tasklist',
+        type: 'form-published',
+        title: 'Form published',
+        description: '"Expense submission v3" is available to assignees.',
+        state: 'read',
+        meta: { identifier: 'form-31', href: '#', label: 'Open form' },
+    },
+    {
+        uuid: 'n21',
+        timestamp: Date.now() - 10 * DAY_MS,
+        source: 'modeler',
+        type: 'collaborator-added',
+        title: 'Added as collaborator',
+        description: 'Nadia Meyer added you as a collaborator on "Risk Engine".',
+        state: 'read',
+    },
+    {
+        uuid: 'n22',
+        timestamp: Date.now() - 12 * DAY_MS,
+        source: 'admin',
+        type: 'policy-updated',
+        title: 'Organization policy updated',
+        description: 'Password rotation policy was updated to require rotation every 90 days.',
+        state: 'read',
+    },
+    {
+        uuid: 'n23',
+        timestamp: Date.now() - 15 * DAY_MS,
+        source: 'billing',
+        type: 'payment-succeeded',
+        title: 'Payment received',
+        description: 'Your monthly payment for the Enterprise plan was received.',
+        state: 'read',
+        meta: { identifier: 'pay-0412', href: '#', label: 'View receipt' },
+    },
+    {
+        uuid: 'n24',
+        timestamp: Date.now() - 20 * DAY_MS,
+        source: 'console',
+        type: 'welcome',
+        title: 'Welcome to Camunda',
+        description: 'Thanks for signing up. Here are some resources to get you started.',
+        state: 'read',
+        meta: { identifier: 'welcome', href: '#', label: 'Open guide' },
+    },
+];
 // ─── Breadcrumb actions ─────────────────────────────────────────────────────
 export const BreadcrumbActionsTemplate = () => {
     const { navProps, isSidebarExpanded } = useC3NavigationV2({
@@ -736,6 +1008,250 @@ export const HeaderTrailingContentTemplate = () => {
     });
     return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Header Trailing Content" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["The ", _jsx("code", { children: "headerTrailingContent" }), " prop renders content in the right-aligned header area, before the tool/action buttons. Used for license tags, environment badges, etc."] })] })] }));
 };
+// ─── Pruning (dead-node filter + group-item degradation) ────────────────────
+export const PruningTemplate = () => {
+    const [activeKey, setActiveKey] = useState('label-1');
+    const noop = () => undefined;
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Pruning demo', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: activeKey,
+        breadcrumbs: [{ key: 'root', label: 'Pruning demo', icon: Building }],
+        sidebarChildren: [
+            {
+                type: 'item',
+                key: 'label-1',
+                label: 'label-1',
+                icon: Dashboard,
+                onClick: () => setActiveKey('label-1'),
+            },
+            {
+                type: 'item',
+                key: 'should-not-render-1',
+                label: 'should-not-render-1',
+                icon: Dashboard,
+            },
+            {
+                type: 'item',
+                key: 'label-2',
+                label: 'label-2',
+                icon: Dashboard,
+                linkProps: { href: '#label-2' },
+            },
+            {
+                type: 'group',
+                key: 'should-not-render-2',
+                label: 'should-not-render-2',
+                icon: Folder,
+                defaultExpanded: true,
+                children: [],
+            },
+            {
+                type: 'group',
+                key: 'should-not-render-3',
+                label: 'should-not-render-3',
+                icon: Folder,
+                defaultExpanded: true,
+                children: [
+                    {
+                        type: 'item',
+                        key: 'should-not-render-4',
+                        label: 'should-not-render-4',
+                        icon: Dashboard,
+                    },
+                ],
+            },
+            {
+                type: 'group',
+                key: 'label-3',
+                label: 'label-3',
+                icon: Folder,
+                defaultExpanded: true,
+                children: [
+                    {
+                        type: 'item',
+                        key: 'label-4',
+                        label: 'label-4',
+                        icon: Dashboard,
+                        onClick: () => setActiveKey('label-4'),
+                    },
+                ],
+            },
+            {
+                type: 'group-item',
+                key: 'label-5',
+                label: 'label-5',
+                icon: Application,
+                defaultExpanded: true,
+                onClick: () => setActiveKey('label-5'),
+                children: [
+                    {
+                        type: 'item',
+                        key: 'label-6',
+                        label: 'label-6',
+                        icon: Dashboard,
+                        onClick: () => setActiveKey('label-6'),
+                    },
+                ],
+            },
+            {
+                type: 'group-item',
+                key: 'label-7',
+                label: 'label-7',
+                icon: Application,
+                onClick: () => setActiveKey('label-7'),
+                children: [],
+            },
+            {
+                type: 'group-item',
+                key: 'should-not-render-5',
+                label: 'should-not-render-5',
+                icon: Application,
+                children: [],
+            },
+            {
+                type: 'section',
+                key: 'interleaved-section',
+                title: 'Interleaved',
+                children: [
+                    {
+                        type: 'item',
+                        key: 'should-not-render-6',
+                        label: 'should-not-render-6',
+                        icon: Dashboard,
+                    },
+                    {
+                        type: 'item',
+                        key: 'label-8',
+                        label: 'label-8',
+                        icon: Dashboard,
+                        onClick: () => setActiveKey('label-8'),
+                    },
+                    {
+                        type: 'item',
+                        key: 'should-not-render-7',
+                        label: 'should-not-render-7',
+                        icon: Dashboard,
+                    },
+                    {
+                        type: 'item',
+                        key: 'label-9',
+                        label: 'label-9',
+                        icon: Dashboard,
+                        onClick: noop,
+                    },
+                ],
+            },
+            {
+                type: 'section',
+                key: 'should-not-render-section',
+                title: 'should-not-render-section',
+                children: [
+                    {
+                        type: 'item',
+                        key: 'should-not-render-8',
+                        label: 'should-not-render-8',
+                        icon: Dashboard,
+                    },
+                ],
+            },
+        ],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Sidebar Pruning" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["Only ", _jsx("code", { children: "label-*" }), " entries should render, in numeric order. Every ", _jsx("code", { children: "should-not-render-*" }), " node (dead items, empty groups, groups with only dead children, unclickable childless group-items, sections with no live children) is filtered out.", _jsx("code", { children: "label-7" }), " is a clickable group-item with no children and should render as a plain item (no chevron)."] })] })] }));
+};
+// ─── Build cluster sidebar entries (helper) ─────────────────────────────────
+const makeCluster = (overrides) => ({
+    uuid: overrides.uuid,
+    name: overrides.name,
+    status: {
+        console: 'Healthy',
+        modeler: 'Healthy',
+        tasklist: 'Healthy',
+        operate: 'Healthy',
+        optimize: 'Healthy',
+        identity: 'Healthy',
+        admin: 'Healthy',
+        zeebe: overrides.zeebeStatus ?? 'Healthy',
+        ...overrides.appStatus,
+    },
+    endpoints: {
+        console: `https://console.example.test/${overrides.uuid}`,
+        modeler: `https://modeler.example.test/${overrides.uuid}`,
+        tasklist: `https://tasklist.example.test/${overrides.uuid}`,
+        operate: `https://operate.example.test/${overrides.uuid}`,
+        optimize: `https://optimize.example.test/${overrides.uuid}`,
+        identity: `https://admin.example.test/${overrides.uuid}`,
+        admin: `https://admin.example.test/${overrides.uuid}`,
+    },
+    generation: {
+        name: 'gen2',
+        versions: {
+            zeebe: overrides.zeebeVersion,
+            operate: overrides.zeebeVersion,
+            tasklist: overrides.zeebeVersion,
+            optimize: overrides.zeebeVersion,
+            connectors: overrides.zeebeVersion,
+        },
+    },
+});
+export const BuildClusterSidebarEntriesTemplate = () => {
+    const clusters = useMemo(() => [
+        makeCluster({
+            uuid: 'modern',
+            name: 'Modern Cluster',
+            zeebeVersion: '8.9.0',
+        }),
+        makeCluster({
+            uuid: 'legacy',
+            name: 'Legacy Cluster',
+            zeebeVersion: '8.8.0',
+        }),
+        makeCluster({
+            uuid: 'paused',
+            name: 'Paused Cluster',
+            zeebeVersion: '8.9.0',
+            zeebeStatus: 'Paused',
+            appStatus: {
+                operate: 'Paused',
+                tasklist: 'Paused',
+                optimize: 'Paused',
+            },
+        }),
+        makeCluster({
+            uuid: 'restricted',
+            name: 'Restricted Cluster',
+            zeebeVersion: '8.9.0',
+        }),
+    ], []);
+    const entries = useMemo(() => buildClusterSidebarEntries(clusters, {
+        resolveClusterLinkProps: (cluster) => cluster.uuid === 'restricted'
+            ? undefined
+            : { href: `#cluster/${cluster.uuid}` },
+        isAppVisible: (app, cluster) => !(cluster.uuid === 'restricted' && app === 'optimize'),
+        appTeaserRoutes: {
+            operate: { href: '#teaser/operate' },
+            tasklist: { href: '#teaser/tasklist' },
+            optimize: { href: '#teaser/optimize' },
+            admin: { href: '#teaser/admin' },
+        },
+        renderTrailingElement: (cluster) => cluster.uuid === 'paused' ? (_jsx(Tag, { type: 'gray', size: 'sm', style: { marginLeft: '0.375rem', flexShrink: 0 }, children: "Paused" })) : undefined,
+    }), [clusters]);
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Camunda Console', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: 'modern-operate',
+        breadcrumbs: [{ key: 'org', label: 'Acme Corp', icon: Building }],
+        sidebarChildren: [
+            {
+                type: 'section',
+                key: 'clusters',
+                title: 'Clusters',
+                children: entries,
+            },
+        ],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "buildClusterSidebarEntries" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["Helper for consumers that list clusters in their sidebar. Each cluster iterates the default apps (operate, tasklist, optimize, admin), resolves the ", _jsx("strong", { children: "admin/identity" }), " alias from zeebe version, and falls back to ", _jsx("code", { children: "appTeaserRoutes" }), " when unhealthy."] }), _jsxs("ul", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Modern Cluster" }), " (zeebe 8.9.0): renders as a clickable group-item with the ", _jsx("em", { children: "Admin" }), " label."] }), _jsxs("li", { children: [_jsx("strong", { children: "Legacy Cluster" }), " (zeebe 8.8.0): renders the", _jsx("em", { children: " Identity" }), " label via internal version check."] }), _jsxs("li", { children: [_jsx("strong", { children: "Paused Cluster" }), ": apps route to teaser pages, trailing", _jsx("em", { children: " Paused" }), " tag, no cluster-level link resolved."] }), _jsxs("li", { children: [_jsx("strong", { children: "Restricted Cluster" }), ":", ' ', _jsx("code", { children: "resolveClusterLinkProps" }), "returns ", _jsx("code", { children: "undefined" }), " so it renders as a pure group (no cluster link), and ", _jsx("code", { children: "isAppVisible" }), " hides Optimize."] })] })] })] }));
+};
 // ─── Compact sections (back button pattern) ─────────────────────────────────
 export const CompactSectionTemplate = () => {
     const [activeKey, setActiveKey] = useState('email-notifications');
@@ -794,3 +1310,72 @@ export const CompactSectionTemplate = () => {
     });
     return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Compact Section (Back Button)" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["The \"Back to home\" item sits in a ", _jsx("strong", { children: "compact section" }), ' ', "that renders flush against the sidebar chrome (no extra margin). The next section (\"Settings\") follows normally with its title and divider."] })] })] }));
 };
+// ─── Global action with custom element (C4Search-shaped) ────────────────────
+/**
+ * Stand-in for a C4Search-style component: controlled `isExpanded`, swaps an
+ * icon button for an inline input + popup when open. Used by the story below
+ * to verify that custom elements supplied via `globalActions[].element`
+ * render as direct children of the header bar (no wrapper) so their internal
+ * popups get the right positioning context.
+ */
+const InlineSearch = ({ isExpanded, onChangeExpanded }) => {
+    if (!isExpanded) {
+        return (_jsx(HeaderGlobalAction, { "aria-label": 'Search', onClick: () => onChangeExpanded(true), children: _jsx(Search, { size: 20 }) }));
+    }
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+        }, children: [_jsx("input", { 
+                // biome-ignore lint/a11y/noAutofocus: search popup expects focus on open
+                autoFocus: true, placeholder: 'Search\u2026', onBlur: () => onChangeExpanded(false), style: {
+                    width: '20rem',
+                    height: '2rem',
+                    padding: '0 var(--cds-spacing-04)',
+                    background: 'var(--cds-field)',
+                    border: '1px solid var(--cds-border-strong)',
+                    color: 'var(--cds-text-primary)',
+                    fontSize: '0.875rem',
+                } }), _jsx("div", { role: 'listbox', "aria-label": 'Search results', style: {
+                    position: 'absolute',
+                    top: '100%',
+                    right: 0,
+                    marginTop: '0.25rem',
+                    minWidth: '20rem',
+                    padding: 'var(--cds-spacing-04)',
+                    background: 'var(--cds-layer-01)',
+                    border: '1px solid var(--cds-border-subtle)',
+                    boxShadow: 'var(--cds-shadow)',
+                    color: 'var(--cds-text-secondary)',
+                    fontSize: '0.875rem',
+                    zIndex: 9000,
+                }, children: "Type to search\u2026" })] }));
+};
+export const GlobalActionWithCustomElementTemplate = () => {
+    const [searchOpen, setSearchOpen] = useState(false);
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Camunda Console', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: 'dashboard',
+        breadcrumbs: [{ key: 'org', label: 'Acme Corp', icon: Building }],
+        sidebarChildren: [
+            {
+                type: 'item',
+                key: 'dashboard',
+                label: 'Dashboard',
+                icon: Dashboard,
+            },
+        ],
+        globalActions: [
+            {
+                key: 'search',
+                label: 'Search',
+                element: (_jsx(InlineSearch, { isExpanded: searchOpen, onChangeExpanded: setSearchOpen })),
+            },
+            { key: 'notifications', label: 'Notifications', icon: Notification },
+            { key: 'help', label: 'Help', icon: Help },
+        ],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Global Action with Custom Element" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["When a ", _jsx("code", { children: "globalActions" }), " entry supplies an", ' ', _jsx("code", { children: "element" }), ", the navigation renders it as a direct child of the header bar (no wrapper) so popups and inputs that rely on a stable positioning context (e.g. C4Search) work correctly. Click the search icon to expand the input and verify the popup positions against the search field, not against an unrelated parent."] })] })] }));
+};

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

@@ -4,12 +4,12 @@ import { PanelHeader, PanelTitle } from './panel-primitives.js';
 const LinkList = styled.ul `
   list-style: none;
   margin: 0;
-  padding: 0.5rem 0;
+  padding: var(--cds-spacing-03) 0;
 `;
 const LinkItem = styled.li ``;
 const LinkButton = styled.button `
   width: 100%;
-  padding: 0.625rem 1rem;
+  padding: 0.625rem var(--cds-spacing-05);
   background: transparent;
   border: none;
   cursor: pointer;