@camunda/camunda-composite-components 0.22.8 → 0.23.1

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

@@ -0,0 +1,796 @@
+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 { 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 { C3NavigationV2 } from '../c3-navigation-v2.js';
+import { C3InfoPanel } from '../tools/c3-info-panel.js';
+import { C3UserPanel } from '../tools/c3-user-panel.js';
+import { useC3NavigationV2 } from '../use-c3-navigation-v2.js';
+// ─── Shared layout wrapper ──────────────────────────────────────────────────
+const MainContent = ({ sidebarExpanded = true, hasSidebar = true, children }) => (_jsx("main", { id: 'main-content', style: {
+        marginLeft: hasSidebar ? (sidebarExpanded ? '16rem' : '3rem') : '0',
+        marginTop: '3rem',
+        padding: '2rem',
+        transition: 'margin-left 0.15s ease-out',
+        minHeight: 'calc(100vh - 3rem)',
+        background: 'var(--cds-background)',
+    }, children: children }));
+// ─── Default (args-driven) ──────────────────────────────────────────────────
+export const DefaultTemplate = (args) => (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...args }), _jsxs(MainContent, { sidebarExpanded: args.sidebar?.isExpanded !== false, hasSidebar: !!args.sidebar, children: [_jsx("h1", { children: "Main Content Area" }), _jsx("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: "This area receives focus when using \"Skip to main content\"." })] })] }));
+// ─── Hook-driven with interactive sidebar ───────────────────────────────────
+export const HookDrivenTemplate = () => {
+    const [activeKey, setActiveKey] = useState('dashboard');
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: {
+            ariaLabel: 'Camunda Console',
+            linkProps: { href: '#' },
+        },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: activeKey,
+        breadcrumbs: [
+            {
+                key: 'org',
+                label: 'Acme Corp',
+                icon: Building,
+                onClick: () => setActiveKey('dashboard'),
+                dropdownTitle: 'Switch Organization',
+                dropdownItems: [
+                    {
+                        key: 'org-1',
+                        label: 'Acme Corp',
+                        icon: Building,
+                        isSelected: 'org-1',
+                        onClick: () => { },
+                    },
+                    {
+                        key: 'org-2',
+                        label: 'Beta Inc',
+                        icon: Building,
+                        isSelected: 'org-2',
+                        onClick: () => { },
+                    },
+                ],
+            },
+        ],
+        globalActions: [
+            {
+                key: 'search',
+                label: 'Search',
+                icon: Search,
+                onClick: () => console.log('search'),
+            },
+            { key: 'notifications', label: 'Notifications', icon: Notification },
+            { key: 'help', label: 'Help', icon: Help },
+            { key: 'user', label: 'User', icon: UserAvatar },
+        ],
+        sidebarChildren: [
+            {
+                type: 'item',
+                key: 'dashboard',
+                label: 'Dashboard',
+                icon: Dashboard,
+                onClick: () => setActiveKey('dashboard'),
+            },
+            {
+                type: 'item',
+                key: 'workspaces',
+                label: 'Workspaces',
+                icon: Workspace,
+                onClick: () => setActiveKey('workspaces'),
+            },
+            {
+                type: 'item',
+                key: 'clusters-page',
+                label: 'Clusters',
+                icon: CloudApp,
+                onClick: () => setActiveKey('clusters-page'),
+            },
+            {
+                type: 'item',
+                key: 'catalog',
+                label: 'Catalog',
+                icon: IbmKnowledgeCatalog,
+                onClick: () => setActiveKey('catalog'),
+            },
+            {
+                type: 'item',
+                key: 'members',
+                label: 'Members',
+                icon: UserMultiple,
+                onClick: () => setActiveKey('members'),
+            },
+            {
+                type: 'item',
+                key: 'settings',
+                label: 'Settings',
+                icon: Settings,
+                onClick: () => setActiveKey('settings'),
+            },
+            {
+                type: 'section',
+                key: 'clusters-section',
+                title: 'Clusters',
+                children: [
+                    {
+                        type: 'group-item',
+                        key: 'cluster-1',
+                        label: 'Cluster A',
+                        icon: CloudApp,
+                        defaultExpanded: true,
+                        trailingElement: (_jsx(Tag, { type: 'gray', size: 'sm', style: { marginLeft: '0.375rem' }, children: "Prod" })),
+                        onClick: () => setActiveKey('cluster-1'),
+                        children: [
+                            {
+                                type: 'item',
+                                key: 'cluster-1-operate',
+                                label: 'Operate',
+                                icon: Play,
+                                onClick: () => setActiveKey('cluster-1-operate'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'cluster-1-tasklist',
+                                label: 'Tasklist',
+                                icon: Task,
+                                onClick: () => setActiveKey('cluster-1-tasklist'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'cluster-1-admin',
+                                label: 'Admin',
+                                icon: Settings,
+                                onClick: () => setActiveKey('cluster-1-admin'),
+                            },
+                        ],
+                    },
+                    {
+                        type: 'group-item',
+                        key: 'cluster-2',
+                        label: 'Cluster B',
+                        icon: CloudApp,
+                        trailingElement: (_jsx(Tag, { type: 'gray', size: 'sm', style: { marginLeft: '0.375rem' }, children: "Stage" })),
+                        onClick: () => setActiveKey('cluster-2'),
+                        children: [
+                            {
+                                type: 'item',
+                                key: 'cluster-2-operate',
+                                label: 'Operate',
+                                icon: Play,
+                                onClick: () => setActiveKey('cluster-2-operate'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'cluster-2-tasklist',
+                                label: 'Tasklist',
+                                icon: Task,
+                                onClick: () => setActiveKey('cluster-2-tasklist'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'cluster-2-admin',
+                                label: 'Admin',
+                                icon: Settings,
+                                onClick: () => setActiveKey('cluster-2-admin'),
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Hook-Driven Navigation" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["Active key: ", _jsx("code", { children: activeKey })] }), _jsxs("p", { style: { marginTop: '0.5rem', color: 'var(--cds-text-secondary)' }, children: ["Click sidebar items to change the active state. The hook resolves", _jsx("code", { children: " isActive" }), " automatically from ", _jsx("code", { children: "activeItemKey" }), "."] })] })] }));
+};
+// ─── Complex tree (all node types) ──────────────────────────────────────────
+export const ComplexTreeTemplate = () => {
+    const [activeKey, setActiveKey] = useState('overview');
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: {
+            ariaLabel: 'Camunda Console',
+            linkProps: { href: '#' },
+        },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: activeKey,
+        breadcrumbs: [
+            {
+                key: 'org',
+                label: 'Acme Corp',
+                icon: Building,
+                onClick: () => setActiveKey('overview'),
+                dropdownTitle: 'Switch Organization',
+                dropdownItems: [
+                    {
+                        key: 'org-acme',
+                        label: 'Acme Corp',
+                        icon: Building,
+                        isSelected: 'org-acme',
+                        onClick: () => { },
+                    },
+                    {
+                        key: 'org-beta',
+                        label: 'Beta Inc',
+                        icon: Building,
+                        isSelected: 'org-beta',
+                        onClick: () => { },
+                    },
+                ],
+            },
+            {
+                key: 'env',
+                label: (activeKey) => {
+                    if (activeKey.startsWith('env-prod'))
+                        return 'Production';
+                    if (activeKey.startsWith('env-staging'))
+                        return 'Staging';
+                    return 'All Environments';
+                },
+                icon: CloudApp,
+                dropdownTitle: 'Switch Environment',
+                dropdownItems: [
+                    {
+                        key: 'env-prod',
+                        label: 'Production',
+                        icon: CloudApp,
+                        isSelected: (activeKey) => activeKey.startsWith('env-prod'),
+                        onClick: () => setActiveKey('env-prod'),
+                    },
+                    {
+                        key: 'env-staging',
+                        label: 'Staging',
+                        icon: CloudApp,
+                        isSelected: (activeKey) => activeKey.startsWith('env-staging'),
+                        onClick: () => setActiveKey('env-staging'),
+                    },
+                ],
+            },
+        ],
+        globalActions: [
+            {
+                key: 'search',
+                label: 'Search',
+                icon: Search,
+                onClick: () => console.log('search'),
+            },
+            { key: 'notifications', label: 'Notifications', icon: Notification },
+            { key: 'help', label: 'Help', icon: Help },
+            { key: 'user', label: 'User', icon: UserAvatar },
+        ],
+        sidebarChildren: [
+            {
+                type: 'item',
+                key: 'overview',
+                label: 'Overview',
+                icon: Dashboard,
+                onClick: () => setActiveKey('overview'),
+            },
+            {
+                type: 'item',
+                key: 'catalog',
+                label: 'Catalog',
+                icon: IbmKnowledgeCatalog,
+                onClick: () => setActiveKey('catalog'),
+            },
+            {
+                type: 'section',
+                key: 'environments-section',
+                title: 'Environments',
+                children: [
+                    {
+                        type: 'group-item',
+                        key: 'env-prod',
+                        label: 'Production',
+                        icon: CloudApp,
+                        defaultExpanded: true,
+                        trailingElement: (_jsx(Tag, { type: 'green', size: 'sm', style: { marginLeft: '0.375rem' }, children: "Live" })),
+                        onClick: () => setActiveKey('env-prod'),
+                        children: [
+                            {
+                                type: 'item',
+                                key: 'env-prod-operate',
+                                label: 'Operate',
+                                icon: Play,
+                                onClick: () => setActiveKey('env-prod-operate'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'env-prod-tasklist',
+                                label: 'Tasklist',
+                                icon: Task,
+                                onClick: () => setActiveKey('env-prod-tasklist'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'env-prod-monitor',
+                                label: 'Monitoring',
+                                icon: Debug,
+                                onClick: () => setActiveKey('env-prod-monitor'),
+                            },
+                        ],
+                    },
+                    {
+                        type: 'group-item',
+                        key: 'env-staging',
+                        label: 'Staging',
+                        icon: CloudApp,
+                        trailingElement: (_jsx(Tag, { type: 'gray', size: 'sm', style: { marginLeft: '0.375rem' }, children: "Stage" })),
+                        onClick: () => setActiveKey('env-staging'),
+                        children: [
+                            {
+                                type: 'item',
+                                key: 'env-staging-operate',
+                                label: 'Operate',
+                                icon: Play,
+                                onClick: () => setActiveKey('env-staging-operate'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'env-staging-tasklist',
+                                label: 'Tasklist',
+                                icon: Task,
+                                onClick: () => setActiveKey('env-staging-tasklist'),
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                type: 'section',
+                key: 'infra-section',
+                title: 'Infrastructure',
+                children: [
+                    {
+                        type: 'group',
+                        key: 'networking',
+                        label: 'Networking',
+                        icon: Network_3,
+                        defaultExpanded: true,
+                        children: [
+                            {
+                                type: 'item',
+                                key: 'dns',
+                                label: 'DNS Records',
+                                icon: Document,
+                                onClick: () => setActiveKey('dns'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'load-balancers',
+                                label: 'Load Balancers',
+                                icon: Application,
+                                onClick: () => setActiveKey('load-balancers'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'firewall',
+                                label: 'Firewall Rules',
+                                icon: Security,
+                                onClick: () => setActiveKey('firewall'),
+                            },
+                        ],
+                    },
+                    {
+                        type: 'group',
+                        key: 'storage',
+                        label: 'Storage',
+                        icon: DataBase,
+                        children: [
+                            {
+                                type: 'item',
+                                key: 'databases',
+                                label: 'Databases',
+                                icon: DataBase,
+                                onClick: () => setActiveKey('databases'),
+                            },
+                            {
+                                type: 'item',
+                                key: 'blob-storage',
+                                label: 'Blob Storage',
+                                icon: Folder,
+                                onClick: () => setActiveKey('blob-storage'),
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                type: 'section',
+                key: 'advanced-section',
+                title: 'Projects',
+                children: [
+                    {
+                        type: 'group',
+                        key: 'project-alpha',
+                        label: 'Project Alpha',
+                        icon: Folder,
+                        defaultExpanded: true,
+                        children: [
+                            {
+                                type: 'item',
+                                key: 'alpha-readme',
+                                label: 'README',
+                                icon: Document,
+                                onClick: () => setActiveKey('alpha-readme'),
+                            },
+                            {
+                                type: 'group-item',
+                                key: 'alpha-services',
+                                label: 'Services',
+                                icon: Application,
+                                defaultExpanded: true,
+                                onClick: () => setActiveKey('alpha-services'),
+                                children: [
+                                    {
+                                        type: 'item',
+                                        key: 'alpha-api',
+                                        label: 'API Gateway',
+                                        icon: Network_3,
+                                        onClick: () => setActiveKey('alpha-api'),
+                                    },
+                                    {
+                                        type: 'item',
+                                        key: 'alpha-worker',
+                                        label: 'Worker',
+                                        icon: Terminal,
+                                        onClick: () => setActiveKey('alpha-worker'),
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        type: 'group',
+                        key: 'project-beta',
+                        label: 'Project Beta',
+                        icon: Folder,
+                        children: [
+                            {
+                                type: 'item',
+                                key: 'beta-readme',
+                                label: 'README',
+                                icon: Document,
+                                onClick: () => setActiveKey('beta-readme'),
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                type: 'section',
+                key: 'admin-section',
+                title: 'Administration',
+                children: [
+                    {
+                        type: 'item',
+                        key: 'members',
+                        label: 'Members',
+                        icon: UserMultiple,
+                        onClick: () => setActiveKey('members'),
+                    },
+                    {
+                        type: 'item',
+                        key: 'settings',
+                        label: 'Settings',
+                        icon: Settings,
+                        onClick: () => setActiveKey('settings'),
+                    },
+                ],
+            },
+        ],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Complex Sidebar Tree" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["Active key: ", _jsx("code", { children: activeKey })] }), _jsxs("p", { style: { marginTop: '0.5rem', color: 'var(--cds-text-secondary)' }, children: ["Exercises all four node types: ", _jsx("strong", { children: "item" }), ",", ' ', _jsx("strong", { children: "group-item" }), " (selectable groups),", ' ', _jsx("strong", { children: "group" }), " (non-selectable groups), and", ' ', _jsx("strong", { children: "section" }), " (root dividers). Also demonstrates nested groups (a group containing a group-item) and dynamic breadcrumb labels."] })] })] }));
+};
+// ─── Tool panels ────────────────────────────────────────────────────────────
+const createStoryTools = () => [
+    {
+        key: 'info',
+        label: 'Info',
+        renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": 'Info', onClick: onClick, isActive: isActive, children: _jsx(Information, { size: 20 }) })),
+        panel: (_jsx(C3InfoPanel, { elements: [
+                {
+                    key: 'docs',
+                    label: 'Documentation',
+                    onClick: () => console.log('docs'),
+                },
+                {
+                    key: 'academy',
+                    label: 'Camunda Academy',
+                    onClick: () => console.log('academy'),
+                },
+                {
+                    key: 'forum',
+                    label: 'Community Forum',
+                    onClick: () => console.log('forum'),
+                },
+            ] })),
+    },
+    {
+        key: 'help',
+        label: 'Help',
+        renderButton: ({ onClick }) => (_jsx(HeaderGlobalAction, { "aria-label": 'Help', onClick: () => {
+                onClick();
+                console.log('Help clicked, no panel, external action');
+            }, children: _jsx(Help, { size: 20 }) })),
+        // no panel, help is a plain button
+    },
+    {
+        key: 'user',
+        label: 'Account',
+        renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": 'Account', onClick: onClick, isActive: isActive, tooltipAlignment: 'end', children: _jsx(UserAvatar, { size: 20 }) })),
+        panel: (_jsx(C3UserPanel, { name: 'Jane Doe', email: 'jane.doe@acme.com', version: '8.7.0-alpha.1', onLogout: () => console.log('logout'), elements: [
+                {
+                    key: 'cookie',
+                    label: 'Cookie preferences',
+                    onClick: () => console.log('cookies'),
+                },
+            ] })),
+    },
+];
+export const ToolPanelsTemplate = () => {
+    const [activeKey, setActiveKey] = useState('dashboard');
+    const tools = createStoryTools();
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Camunda', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: activeKey,
+        tools,
+        breadcrumbs: [
+            {
+                key: 'org',
+                label: 'Acme Corp',
+                icon: Building,
+            },
+        ],
+        sidebarChildren: [
+            {
+                type: 'item',
+                key: 'dashboard',
+                label: 'Dashboard',
+                icon: Dashboard,
+                onClick: () => setActiveKey('dashboard'),
+            },
+            {
+                type: 'item',
+                key: 'settings',
+                label: 'Settings',
+                icon: Settings,
+                onClick: () => setActiveKey('settings'),
+            },
+        ],
+    });
+    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." })] })] }));
+};
+// ─── Breadcrumb actions ─────────────────────────────────────────────────────
+export const BreadcrumbActionsTemplate = () => {
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Camunda Modeler', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: 'readme',
+        breadcrumbs: [
+            {
+                key: 'org',
+                label: 'Acme Corp',
+                icon: Building,
+                dropdownTitle: 'Switch Organization',
+                dropdownItems: [
+                    {
+                        key: 'org-1',
+                        label: 'Acme Corp',
+                        icon: Building,
+                        isSelected: true,
+                    },
+                    { key: 'org-2', label: 'Beta Inc', icon: Building },
+                ],
+            },
+            {
+                key: 'project',
+                label: 'Payment Service',
+                icon: Folder,
+                actions: [
+                    {
+                        key: 'rename',
+                        label: 'Rename',
+                        onClick: () => console.log('rename'),
+                    },
+                    {
+                        key: 'duplicate',
+                        label: 'Duplicate',
+                        onClick: () => console.log('duplicate'),
+                    },
+                    {
+                        key: 'delete',
+                        label: 'Delete project',
+                        isDanger: true,
+                        hasDivider: true,
+                        onClick: () => console.log('delete'),
+                    },
+                ],
+            },
+            {
+                key: 'file',
+                label: 'payment-flow.bpmn',
+                icon: Diagram,
+            },
+        ],
+        sidebarChildren: [],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, hasSidebar: false, children: [_jsx("h1", { children: "Breadcrumb Actions" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["The ", _jsx("strong", { children: "Payment Service" }), " breadcrumb has an overflow menu (triple-dot) with actions: Rename, Duplicate, and Delete (danger + divider). The ", _jsx("strong", { children: "Acme Corp" }), " breadcrumb has a dropdown for org switching. Both features can coexist on the same segment."] })] })] }));
+};
+// ─── Cluster webapp (Org > Cluster > App with app switching) ────────────────
+export const ClusterWebappTemplate = () => {
+    const [activeKey, setActiveKey] = useState('processes');
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Camunda Operate', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: activeKey,
+        breadcrumbs: [
+            {
+                key: 'org',
+                label: 'Acme Corp',
+                icon: Building,
+                linkProps: { href: '#modeler-org' },
+            },
+            {
+                key: 'cluster',
+                label: 'Production Cluster',
+                icon: CloudApp,
+                linkProps: { href: '#console-cluster' },
+            },
+            {
+                key: 'app',
+                label: 'Operate',
+                icon: Play,
+                dropdownTitle: 'Switch application',
+                dropdownAriaLabel: 'Switch application',
+                dropdownItems: [
+                    { key: 'operate', label: 'Operate', icon: Play, isSelected: true },
+                    {
+                        key: 'tasklist',
+                        label: 'Tasklist',
+                        icon: Task,
+                        linkProps: { href: '#tasklist' },
+                    },
+                    {
+                        key: 'optimize',
+                        label: 'Optimize',
+                        icon: Analytics,
+                        linkProps: { href: '#optimize' },
+                    },
+                    {
+                        key: 'admin',
+                        label: 'Admin',
+                        icon: Settings,
+                        linkProps: { href: '#admin' },
+                    },
+                ],
+            },
+        ],
+        sidebarChildren: [
+            {
+                type: 'item',
+                key: 'dashboard',
+                label: 'Dashboard',
+                icon: Dashboard,
+                onClick: () => setActiveKey('dashboard'),
+            },
+            {
+                type: 'item',
+                key: 'processes',
+                label: 'Processes',
+                icon: Play,
+                onClick: () => setActiveKey('processes'),
+            },
+            {
+                type: 'item',
+                key: 'decisions',
+                label: 'Decisions',
+                icon: Document,
+                onClick: () => setActiveKey('decisions'),
+            },
+        ],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(C3NavigationV2, { ...navProps }), _jsxs(MainContent, { sidebarExpanded: isSidebarExpanded, children: [_jsx("h1", { children: "Cluster Webapp Pattern" }), _jsxs("p", { style: { marginTop: '1rem', color: 'var(--cds-text-secondary)' }, children: ["Standard ", _jsx("strong", { children: "Org > Cluster > App" }), " breadcrumb chain for cluster-scoped webapps (Operate, Tasklist, Optimize, Admin). The app crumb has a dropdown to switch between sibling apps on the same cluster. Org and cluster crumbs link back to web modeler / console."] }), _jsxs("p", { style: { marginTop: '0.5rem', color: 'var(--cds-text-secondary)' }, children: ["This pattern is what ", _jsx("code", { children: "useClusterWebappBreadcrumbs" }), " builds automatically from C3 profile data."] })] })] }));
+};
+// ─── Header trailing content (license tag slot) ─────────────────────────────
+export const HeaderTrailingContentTemplate = () => {
+    const [activeKey, setActiveKey] = useState('dashboard');
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Camunda Operate', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: activeKey,
+        headerTrailingContent: (_jsx("span", { style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: '0 0.5rem',
+                height: '1.5rem',
+                borderRadius: '1rem',
+                background: 'var(--cds-layer-02)',
+                color: 'var(--cds-text-secondary)',
+                fontSize: '0.75rem',
+                whiteSpace: 'nowrap',
+            }, children: "Non-production license" })),
+        breadcrumbs: [{ key: 'app', label: 'Operate', icon: Play }],
+        sidebarChildren: [
+            {
+                type: 'item',
+                key: 'dashboard',
+                label: 'Dashboard',
+                icon: Dashboard,
+                onClick: () => setActiveKey('dashboard'),
+            },
+            {
+                type: 'item',
+                key: 'processes',
+                label: 'Processes',
+                icon: Play,
+                onClick: () => setActiveKey('processes'),
+            },
+        ],
+        globalActions: [
+            { key: 'help', label: 'Help', icon: Help },
+            { key: 'user', label: 'User', icon: UserAvatar },
+        ],
+    });
+    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."] })] })] }));
+};
+// ─── Compact sections (back button pattern) ─────────────────────────────────
+export const CompactSectionTemplate = () => {
+    const [activeKey, setActiveKey] = useState('email-notifications');
+    const { navProps, isSidebarExpanded } = useC3NavigationV2({
+        app: { ariaLabel: 'Camunda Modeler', linkProps: { href: '#' } },
+        skipToContentTargetId: 'main-content',
+        activeItemKey: activeKey,
+        breadcrumbs: [
+            { key: 'org', label: 'Acme Corp', icon: Building },
+            { key: 'settings', label: 'Settings', icon: Settings },
+        ],
+        sidebarChildren: [
+            {
+                type: 'section',
+                key: 'back',
+                compact: true,
+                children: [
+                    {
+                        type: 'item',
+                        key: 'back-home',
+                        label: 'Back to home',
+                        icon: ArrowLeft,
+                        onClick: () => console.log('navigate back'),
+                    },
+                ],
+            },
+            {
+                type: 'section',
+                key: 'settings-section',
+                title: 'Settings',
+                children: [
+                    {
+                        type: 'item',
+                        key: 'email-notifications',
+                        label: 'Email notifications',
+                        icon: Notification,
+                        onClick: () => setActiveKey('email-notifications'),
+                    },
+                    {
+                        type: 'item',
+                        key: 'deployment-settings',
+                        label: 'Process application deployment',
+                        icon: Application,
+                        onClick: () => setActiveKey('deployment-settings'),
+                    },
+                    {
+                        type: 'item',
+                        key: 'accessibility',
+                        label: 'Accessibility',
+                        icon: Settings,
+                        onClick: () => setActiveKey('accessibility'),
+                    },
+                ],
+            },
+        ],
+    });
+    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."] })] })] }));
+};