@countermeasure-platform/web-components 1.3.5 → 1.3.6-dev.37.1

package/src/components/brand/types.ts

@@ -29,6 +29,8 @@ export interface BrandLockupConfig {
   container?: HTMLElement | string
   markSize?: BrandSize | number
   label?: string
+  subtitle?: string
+  wordmarkCase?: 'uppercase' | 'title'
   decorative?: boolean
   showWordmark?: boolean
   className?: string

package/src/icons/icons.test.ts

@@ -106,7 +106,7 @@ describe('Icons Module', () => {
       expect(resolveLucideIconName('capacity')).toBe('Gauge')
       expect(resolveLucideIconName('api-access')).toBe('KeyRound')
       expect(resolveLucideIconName('intel-reports')).toBe('FileText')
-      expect(resolveLucideIconName('notifications')).toBe('Siren')
+      expect(resolveLucideIconName('notifications')).toBe('Bell')
       expect(resolveLucideIconName('runners')).toBe('Server')
       expect(getIconSvgInner('lucide', 'capacity')).toBe(getIconSvgInner('lucide', 'Gauge'))
     })

package/src/icons/index.ts

@@ -52,7 +52,7 @@ export const SEMANTIC_ICON_ALIASES = {
   'api-access': 'KeyRound',
   authentication: 'Lock',
   actors: 'Users',
-  bell: 'Siren',
+  bell: 'Bell',
   capacity: 'Gauge',
   'circle-help': 'CircleAlert',
   code: 'Code2',
@@ -63,7 +63,12 @@ export const SEMANTIC_ICON_ALIASES = {
   integrations: 'Plug',
   library: 'BookOpen',
   mitre: 'Grid3X3',
-  notifications: 'Siren',
+  dark: 'Moon',
+  light: 'Sun',
+  midnight: 'Monitor',
+  monitor: 'Monitor',
+  moon: 'Moon',
+  notifications: 'Bell',
   passkeys: 'KeyRound',
   pipeline: 'Workflow',
   platform: 'Building2',

package/src/icons/lucide.ts

@@ -32,6 +32,7 @@ export const LUCIDE_ICON_PATHS = {
   BookOpen: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z',
   BarChart3: 'M3 3v18h18M7 16v-5M12 16v-9M17 16v-3',
   Activity: 'M22 12h-4l-3 9L9 3l-3 9H2',
+  Bell: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0',
   Siren: 'M7 18a5 5 0 1 1 10 0M5 21h14M21 12h1M3 12H2M5.6 5.6l-.7-.7M18.4 5.6l.7-.7M11 4h2v3h-2z',
   Users:
     'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75',
@@ -41,6 +42,9 @@ export const LUCIDE_ICON_PATHS = {
     'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
   PanelLeftClose: 'M3 3h18v18H3zM9 3v18M16 15l-3-3 3-3',
   LogOut: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9',
+  Monitor:
+    'M20 3H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8 21h8M12 17v4',
+  Moon: 'M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9',
   Sun: 'M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10z',
   ChevronDown: 'm6 9 6 6 6-6',
   ChevronRight: 'm9 6 6 6-6 6',

package/src/index.ts

@@ -56,6 +56,8 @@ export {
   getCoreAppRouteLabel,
   mountCoreAppChrome,
   mountCoreAppChromeFromDom,
+  mountCoreAppLibraryDashboard,
+  mountCoreAppLibraryDashboardFromDom,
   PageHeader,
   createPageHeader,
 } from './layout/index'

package/src/layout/app-shell.test.ts

@@ -21,6 +21,9 @@ describe('TopMenuBar', () => {
     expect(topbar.el.querySelector('.cmm-topbar__product')?.textContent).toBe('Threat Library')
     expect(topbar.el.querySelector('.cmm-topbar__current')?.textContent).toBe('Library Dashboard')
     expect(topbar.el.querySelector('[data-action-id="notifications"]')).toBeTruthy()
+    expect(
+      topbar.el.querySelector('[data-action-id="notifications"] svg path')?.getAttribute('d')
+    ).toContain('M18 8A6')
     expect(topbar.el.querySelector('.cmm-topbar__avatar')?.textContent).toBe('WR')
 
     const trigger = topbar.el.querySelector<HTMLButtonElement>('.cmm-topbar__user-trigger')
@@ -38,6 +41,79 @@ describe('TopMenuBar', () => {
     expect(document.body.contains(topbar.el)).toBe(false)
   })
 
+  it('renders lowercase theme mode icons for native topbar actions', () => {
+    const topbar = new TopMenuBar({
+      product: 'Threat Library',
+      current: 'Library Dashboard',
+      actions: [
+        { id: 'dark-mode', label: 'Dark mode', icon: 'moon' },
+        { id: 'system-mode', label: 'System mode', icon: 'monitor' },
+        { id: 'theme', label: 'Theme', icon: 'theme' },
+      ],
+    })
+
+    expect(
+      topbar.el.querySelector('[data-action-id="dark-mode"] svg path')?.getAttribute('d')
+    ).toContain('M12 3a6')
+    expect(
+      topbar.el.querySelector('[data-action-id="system-mode"] svg path')?.getAttribute('d')
+    ).toContain('M20 3H4')
+    expect(
+      topbar.el.querySelector('[data-action-id="theme"] svg path')?.getAttribute('d')
+    ).toContain('M12 2v2')
+
+    topbar.destroy()
+  })
+
+  it('updates the user menu without moving surrounding actions', () => {
+    const beforeAction = document.createElement('span')
+    const afterAction = document.createElement('span')
+    beforeAction.setAttribute('data-before-action', '')
+    afterAction.setAttribute('data-after-action', '')
+
+    const topbar = new TopMenuBar({
+      product: 'Threat Library',
+      beforeActions: beforeAction,
+      afterActions: afterAction,
+      actions: [{ id: 'notifications', label: 'Notifications', icon: 'bell' }],
+      user: {
+        name: 'CounterMeasure User',
+        initials: 'CU',
+      },
+    })
+
+    expect(topbar.el.querySelector('.cmm-topbar__avatar')?.textContent).toBe('CU')
+
+    topbar.updateUser({
+      name: 'Wyatt Roersma',
+      detail: 'wyattroersma@gmail.com',
+      initials: 'WR',
+      avatarUrl: '/api/v1/users/user-1/avatar?v=profile.png',
+    })
+
+    const actionNodes = Array.from(
+      topbar.el.querySelector('.cmm-topbar__actions')?.childNodes ?? []
+    )
+    const beforeIndex = actionNodes.indexOf(beforeAction)
+    const userIndex = actionNodes.indexOf(
+      topbar.el.querySelector('.cmm-topbar__user') as HTMLElement
+    )
+    const afterIndex = actionNodes.indexOf(afterAction)
+
+    expect(beforeIndex).toBeLessThan(userIndex)
+    expect(userIndex).toBeLessThan(afterIndex)
+    expect(topbar.el.querySelector('.cmm-topbar__avatar')?.textContent).toBe('')
+    expect(topbar.el.querySelector('.cmm-topbar__avatar img')?.getAttribute('src')).toBe(
+      '/api/v1/users/user-1/avatar?v=profile.png'
+    )
+    expect(topbar.el.querySelector('.cmm-topbar__user-name')?.textContent).toBe('Wyatt Roersma')
+    expect(topbar.el.querySelector('.cmm-topbar__user-detail')?.textContent).toBe(
+      'wyattroersma@gmail.com'
+    )
+
+    topbar.destroy()
+  })
+
   it('supports native custom action nodes and data-hook attributes', () => {
     const notificationWrapper = document.createElement('div')
     notificationWrapper.setAttribute('data-notification-wrapper', '')

package/src/layout/app-shell.ts

@@ -180,9 +180,15 @@ function createActionElement(action: TopMenuBarActionInput, iconSet: IconSet): H
 export class TopMenuBar {
   public readonly el: HTMLElement
   private readonly cleanupFns: (() => void)[] = []
+  private readonly iconSet: IconSet
+  private readonly actionsEl: HTMLElement
+  private readonly userAnchor: Comment
+  private userMenuEl: HTMLElement | null = null
+  private userCleanupFns: (() => void)[] = []
 
   constructor(config: TopMenuBarConfig = {}) {
     const iconSet = config.iconSet ?? 'lucide'
+    this.iconSet = iconSet
     this.el = document.createElement('header')
     this.el.className = ['cmm-topbar', config.className].filter(Boolean).join(' ')
 
@@ -231,6 +237,8 @@ export class TopMenuBar {
 
     const actions = document.createElement('div')
     actions.classList.add('cmm-topbar__actions')
+    this.actionsEl = actions
+    this.userAnchor = document.createComment('cmm-topbar-user')
 
     appendElements(actions, config.beforeActions)
 
@@ -238,8 +246,9 @@ export class TopMenuBar {
       actions.appendChild(createActionElement(action, iconSet))
     }
 
+    actions.appendChild(this.userAnchor)
     if (config.user !== undefined) {
-      actions.appendChild(this.createUserMenu(config.user, iconSet))
+      this.updateUser(config.user)
     }
 
     appendElements(actions, config.afterActions)
@@ -253,13 +262,33 @@ export class TopMenuBar {
   }
 
   destroy(): void {
+    this.clearUserMenu()
     for (const cleanup of this.cleanupFns.splice(0)) {
       cleanup()
     }
     this.el.remove()
   }
 
-  private createUserMenu(user: TopMenuBarUser, iconSet: IconSet): HTMLElement {
+  updateUser(user: TopMenuBarUser): void {
+    this.clearUserMenu()
+    const userMenu = this.createUserMenu(user, this.iconSet)
+    this.actionsEl.insertBefore(userMenu.element, this.userAnchor)
+    this.userMenuEl = userMenu.element
+    this.userCleanupFns = userMenu.cleanup
+  }
+
+  private clearUserMenu(): void {
+    for (const cleanup of this.userCleanupFns.splice(0)) {
+      cleanup()
+    }
+    this.userMenuEl?.remove()
+    this.userMenuEl = null
+  }
+
+  private createUserMenu(
+    user: TopMenuBarUser,
+    iconSet: IconSet
+  ): { element: HTMLElement; cleanup: (() => void)[] } {
     const root = document.createElement('div')
     root.classList.add('cmm-topbar__user')
 
@@ -338,14 +367,16 @@ export class TopMenuBar {
 
     document.addEventListener('pointerdown', closeOnOutsidePointer)
     document.addEventListener('keydown', closeOnEscape)
-    this.cleanupFns.push(() => {
-      document.removeEventListener('pointerdown', closeOnOutsidePointer)
-      document.removeEventListener('keydown', closeOnEscape)
-    })
+    const cleanup = [
+      (): void => {
+        document.removeEventListener('pointerdown', closeOnOutsidePointer)
+        document.removeEventListener('keydown', closeOnEscape)
+      },
+    ]
 
     root.appendChild(trigger)
     root.appendChild(menu)
-    return root
+    return { element: root, cleanup }
   }
 }
 

package/src/layout/core-app-chrome.test.ts

@@ -43,7 +43,7 @@ describe('core app chrome preset', () => {
   })
 
   it('maps native app routes to topbar labels', () => {
-    expect(getCoreAppRouteLabel('/app')).toBe('Platform Overview')
+    expect(getCoreAppRouteLabel('/app')).toBe('Library Dashboard')
     expect(getCoreAppRouteLabel('/app/dashboards/library')).toBe('Library Dashboard')
     expect(getCoreAppRouteLabel('/app/jobs')).toBe('Jobs')
     expect(getCoreAppRouteLabel('/app/api-access/tokens')).toBe('API Access')
@@ -60,8 +60,14 @@ describe('core app chrome preset', () => {
       },
     })
 
-    expect(config.variant).toBe('cm')
-    expect(config.brand).toMatchObject({ label: 'CounterMeasure', href: '/app' })
+    expect(config.variant).toBe('threat-library')
+    expect(config.brand).toMatchObject({
+      label: 'CounterMeasure',
+      subtitle: 'Platform',
+      wordmarkCase: 'title',
+      markSize: 24,
+      href: '/app',
+    })
     expect(config.scope?.options[0]?.label).toBe('All Tenants')
     expect(config.collapsible).toBe(true)
     expect(config.collapseButtonVisible).toBe(true)
@@ -75,7 +81,7 @@ describe('core app chrome preset', () => {
     const config = createCoreAppTopbarConfig({ pathname: '/app/jobs' })
 
     expect(actions).toHaveLength(3)
-    expect(config.product).toBe('CounterMeasure Core')
+    expect(config.product).toBe('Threat Library')
     expect(config.current).toBe('Jobs')
     expect(config.actions?.[0]).toMatchObject({
       id: 'search',
@@ -204,7 +210,11 @@ describe('core app chrome preset', () => {
     expect(preset.topbar.current).toBe('Jobs')
     expect(preset.sidebar.pathname).toBe('/app/jobs')
     expect(aside?.classList.contains('sidebar--product')).toBe(true)
-    expect(aside?.getAttribute('data-sidebar')).toBe('cm')
+    expect(aside?.getAttribute('data-sidebar')).toBe('threat-library')
+    expect(container.querySelector('.sidebar__header .cmm-brand-lockup--title')).toBeTruthy()
+    expect(
+      container.querySelector('.sidebar__header .cmm-brand-lockup__subtitle')?.textContent
+    ).toBe('Platform')
     expect(active?.classList.contains('sidebar__item--active')).toBe(true)
     expect(active?.getAttribute('aria-current')).toBe('page')
     expect(library?.classList.contains('sidebar__item--active')).toBe(false)
@@ -283,9 +293,11 @@ describe('core app chrome preset', () => {
     })
 
     const topbar = topbarContainer.querySelector<HTMLElement>('.cmm-topbar')
+    const actionGroup = topbarContainer.querySelector<HTMLElement>('.cmm-topbar__actions')
     expect(topbar?.querySelector('[data-app-search-trigger]')).toBeTruthy()
     expect(topbar?.querySelector('[data-before-actions]')).toBe(beforeActions)
     expect(topbar?.querySelector('[data-notification-toggle]')).toBe(action)
+    expect(Array.from(actionGroup?.children ?? []).slice(-2)).toEqual([beforeActions, action])
     expect(action.isConnected).toBe(true)
 
     mounted.destroy()

package/src/layout/core-app-chrome.ts

@@ -243,7 +243,7 @@ export function createCoreAppSidebarSections(basePath = '/app'): SidebarSection[
 export function getCoreAppRouteLabel(pathname: string, basePath = '/app'): string {
   const relativePathname = stripBasePath(pathname, basePath)
   if (relativePathname === '/' || relativePathname === '') {
-    return 'Platform Overview'
+    return 'Library Dashboard'
   }
 
   return (
@@ -258,7 +258,7 @@ export function createCoreAppSidebarConfig(
   const {
     basePath = '/app',
     sections,
-    variant = 'cm',
+    variant = 'threat-library',
     brand,
     scope,
     beforeNav,
@@ -284,6 +284,9 @@ export function createCoreAppSidebarConfig(
 
   const resolvedBrand: SidebarBrandConfig = brand ?? {
     label: 'CounterMeasure',
+    subtitle: 'Platform',
+    wordmarkCase: 'title',
+    markSize: 24,
     href: joinBasePath(basePath, '/'),
   }
 
@@ -369,7 +372,7 @@ export function createCoreAppTopbarConfig(
   const {
     basePath = '/app',
     pathname = typeof window === 'undefined' ? '/' : window.location.pathname,
-    product = 'CounterMeasure Core',
+    product = 'Threat Library',
     current = getCoreAppRouteLabel(pathname, basePath),
     actions,
     beforeActions,
@@ -545,6 +548,8 @@ function buildTopbarMountOptions(
   if (options.pathname !== undefined) topbarOptions.pathname = options.pathname
   if (options.topbarUser !== undefined) topbarOptions.user = options.topbarUser
   if (options.topbarActions !== undefined) topbarOptions.actions = options.topbarActions
+  if (options.topbar?.beforeActions !== undefined)
+    topbarOptions.beforeActions = options.topbar.beforeActions
   if (afterActions !== undefined) topbarOptions.afterActions = afterActions
   dedupeDefaultActionsForPreservedNodes(topbarOptions, preservedActions)