@countermeasure-platform/web-components 1.3.5 → 1.3.6

package/src/layout/core-app-library-dashboard.ts

@@ -0,0 +1,519 @@
+import { resolveContainer } from '../primitives/utils'
+
+export type CoreAppLibraryMetricTone = 'cyan' | 'orange' | 'violet' | 'neutral'
+export type CoreAppLibraryConnectorStatus = 'active' | 'error' | 'paused' | 'disabled'
+
+export interface CoreAppLibraryMetric {
+  id: string
+  label: string
+  value: number | string
+  helper?: string
+  tone?: CoreAppLibraryMetricTone
+}
+
+export interface CoreAppLibraryTacticDepth {
+  label: string
+  value: number
+}
+
+export interface CoreAppLibraryFreshnessBucket {
+  label: string
+  detections: number
+  rules?: number
+  intel?: number
+}
+
+export interface CoreAppLibraryConnector {
+  id: string
+  name: string
+  status: CoreAppLibraryConnectorStatus
+  schedule: string
+  tags: string[]
+  lastRun: string
+  enabled?: boolean
+}
+
+export interface CoreAppLibraryPipelineSummary {
+  connectors: number
+  active: number
+  error: number
+}
+
+export interface CoreAppLibraryDashboardError {
+  source?: string
+  detail: string
+}
+
+export interface CoreAppLibraryDashboardData {
+  title?: string
+  subtitle?: string
+  metrics?: CoreAppLibraryMetric[]
+  tacticDepth?: CoreAppLibraryTacticDepth[]
+  freshness?: CoreAppLibraryFreshnessBucket[]
+  pipelineSummary?: CoreAppLibraryPipelineSummary
+  connectors?: CoreAppLibraryConnector[]
+  loading?: boolean
+  error?: string
+  errors?: CoreAppLibraryDashboardError[]
+  generatedAt?: string
+}
+
+export interface CoreAppLibraryDashboardMountOptions {
+  container: HTMLElement | string
+  data?: CoreAppLibraryDashboardData
+  className?: string
+  clearContainer?: boolean
+}
+
+export interface CoreAppLibraryDashboardDomMountOptions {
+  root?: ParentNode
+  selector?: string
+  dataSelector?: string
+  data?: CoreAppLibraryDashboardData
+  className?: string
+  clearContainer?: boolean
+}
+
+export interface CoreAppLibraryDashboardMount {
+  element: HTMLElement
+  update: (data: CoreAppLibraryDashboardData) => void
+  destroy: () => void
+}
+
+interface NormalizedDashboardData {
+  title: string
+  subtitle: string
+  metrics: CoreAppLibraryMetric[]
+  tacticDepth: CoreAppLibraryTacticDepth[]
+  freshness: CoreAppLibraryFreshnessBucket[]
+  pipelineSummary: CoreAppLibraryPipelineSummary
+  connectors: CoreAppLibraryConnector[]
+  loading: boolean
+  error?: string
+  errors: CoreAppLibraryDashboardError[]
+  generatedAt?: string
+}
+
+const DEFAULT_DOM_SELECTOR = '[data-core-app-library-dashboard]'
+const DEFAULT_DATA_SELECTOR = '[data-core-app-library-dashboard-data]'
+const DASHBOARD_TITLE_ID_PREFIX = 'cmm-library-dashboard-title'
+let dashboardTitleIdSequence = 0
+
+const EMPTY_PIPELINE_SUMMARY: CoreAppLibraryPipelineSummary = {
+  connectors: 0,
+  active: 0,
+  error: 0,
+}
+
+const createElement = <K extends keyof HTMLElementTagNameMap>(
+  tagName: K,
+  className?: string,
+  textContent?: string
+): HTMLElementTagNameMap[K] => {
+  const element = document.createElement(tagName)
+  if (className !== undefined) element.className = className
+  if (textContent !== undefined) element.textContent = textContent
+  return element
+}
+
+const toDisplayValue = (value: number | string): string =>
+  typeof value === 'number' ? value.toLocaleString() : value
+
+const toNumber = (value: number | undefined): number =>
+  Number.isFinite(value) && value !== undefined ? value : 0
+
+const createIntegerTicks = (maxValue: number, maxTicks = 5): number[] => {
+  const max = Math.max(0, Math.ceil(maxValue))
+  if (max === 0) return [0]
+  if (max <= maxTicks - 1) {
+    return Array.from({ length: max + 1 }, (_, index) => index)
+  }
+
+  const ticks = new Set<number>([0, max])
+  for (let index = 1; index < maxTicks - 1; index += 1) {
+    ticks.add(Math.round((max * index) / (maxTicks - 1)))
+  }
+
+  return Array.from(ticks).sort((left, right) => left - right)
+}
+
+const getDashboardTitleId = (root: HTMLElement): string => {
+  const existing = root.getAttribute('aria-labelledby')
+  if (existing !== null && existing.length > 0) return existing
+
+  dashboardTitleIdSequence += 1
+  return `${DASHBOARD_TITLE_ID_PREFIX}-${dashboardTitleIdSequence}`
+}
+
+const cloneMetrics = (metrics: CoreAppLibraryMetric[]): CoreAppLibraryMetric[] =>
+  metrics.map(metric => ({ ...metric }))
+
+const cloneTactics = (tactics: CoreAppLibraryTacticDepth[]): CoreAppLibraryTacticDepth[] =>
+  tactics.map(tactic => ({ ...tactic }))
+
+const cloneFreshness = (
+  buckets: CoreAppLibraryFreshnessBucket[]
+): CoreAppLibraryFreshnessBucket[] => buckets.map(bucket => ({ ...bucket }))
+
+const cloneConnectors = (connectors: CoreAppLibraryConnector[]): CoreAppLibraryConnector[] =>
+  connectors.map(connector => ({ ...connector, tags: [...connector.tags] }))
+
+const cloneErrors = (errors: CoreAppLibraryDashboardError[]): CoreAppLibraryDashboardError[] =>
+  errors.map(error => ({ ...error }))
+
+const normalizeDashboardData = (
+  data: CoreAppLibraryDashboardData | undefined
+): NormalizedDashboardData => ({
+  title: data?.title ?? 'Library Dashboard',
+  subtitle: data?.subtitle ?? 'Detection content, MITRE coverage, and collection pipeline.',
+  metrics: cloneMetrics(data?.metrics ?? []),
+  tacticDepth: cloneTactics(data?.tacticDepth ?? []),
+  freshness: cloneFreshness(data?.freshness ?? []),
+  pipelineSummary: { ...(data?.pipelineSummary ?? EMPTY_PIPELINE_SUMMARY) },
+  connectors: cloneConnectors(data?.connectors ?? []),
+  loading: data?.loading ?? false,
+  ...(data?.error !== undefined ? { error: data.error } : {}),
+  errors: cloneErrors(data?.errors ?? []),
+  ...(data?.generatedAt !== undefined ? { generatedAt: data.generatedAt } : {}),
+})
+
+const parseDashboardData = (
+  element: HTMLElement | null
+): CoreAppLibraryDashboardData | undefined => {
+  if (element === null) return undefined
+
+  try {
+    const parsed: unknown = JSON.parse(element.textContent ?? '')
+    return parsed !== null && typeof parsed === 'object'
+      ? (parsed as CoreAppLibraryDashboardData)
+      : undefined
+  } catch {
+    return undefined
+  }
+}
+
+const appendMetricCard = (container: HTMLElement, metric: CoreAppLibraryMetric): void => {
+  const card = createElement('article', 'cmm-library-metric')
+  card.dataset.tone = metric.tone ?? 'neutral'
+  card.dataset.metricId = metric.id
+
+  card.append(
+    createElement('div', 'cmm-library-metric__label', metric.label),
+    createElement('div', 'cmm-library-metric__value', toDisplayValue(metric.value))
+  )
+
+  if (metric.helper !== undefined) {
+    card.appendChild(createElement('div', 'cmm-library-metric__helper', metric.helper))
+  }
+
+  container.appendChild(card)
+}
+
+const appendEmpty = (
+  container: HTMLElement,
+  text: string,
+  className = 'cmm-library-dashboard__empty'
+): void => {
+  container.appendChild(createElement('div', className, text))
+}
+
+const appendMetricStrip = (container: HTMLElement, metrics: CoreAppLibraryMetric[]): void => {
+  const strip = createElement('div', 'cmm-library-dashboard__metrics')
+  if (metrics.length === 0) {
+    appendEmpty(strip, 'No metrics available')
+    container.appendChild(strip)
+    return
+  }
+
+  for (const metric of metrics) {
+    appendMetricCard(strip, metric)
+  }
+  container.appendChild(strip)
+}
+
+const appendDashboardMeta = (
+  container: HTMLElement,
+  data: Pick<NormalizedDashboardData, 'errors' | 'generatedAt'>
+): void => {
+  if (data.errors.length === 0 && data.generatedAt === undefined) return
+
+  const meta = createElement('div', 'cmm-library-dashboard__meta')
+  if (data.generatedAt !== undefined) {
+    meta.appendChild(
+      createElement('span', 'cmm-library-dashboard__timestamp', `Updated ${data.generatedAt}`)
+    )
+  }
+
+  for (const error of data.errors) {
+    const detail = error.source !== undefined ? `${error.source}: ${error.detail}` : error.detail
+    meta.appendChild(createElement('span', 'cmm-library-dashboard__warning', detail))
+  }
+
+  container.appendChild(meta)
+}
+
+const appendTacticDepthChart = (
+  container: HTMLElement,
+  tactics: CoreAppLibraryTacticDepth[]
+): void => {
+  const panel = createElement('section', 'cmm-library-chart cmm-library-chart--depth')
+  const title = createElement('h2', 'cmm-library-chart__title', 'Detection Depth by Tactic')
+  const body = createElement('div', 'cmm-library-depth')
+
+  if (tactics.length === 0) {
+    appendEmpty(body, 'No tactic coverage yet', 'cmm-library-chart__empty')
+    panel.append(title, body)
+    container.appendChild(panel)
+    return
+  }
+
+  const maxValue = Math.max(1, ...tactics.map(tactic => tactic.value))
+
+  for (const tactic of tactics) {
+    const row = createElement('div', 'cmm-library-depth__row')
+    const label = createElement('div', 'cmm-library-depth__label', tactic.label)
+    const barTrack = createElement('div', 'cmm-library-depth__track')
+    const bar = createElement('span', 'cmm-library-depth__bar')
+    bar.style.width = `${Math.max(4, (tactic.value / maxValue) * 100).toFixed(2)}%`
+    bar.setAttribute('aria-label', `${tactic.label}: ${tactic.value}`)
+    barTrack.appendChild(bar)
+    row.append(label, barTrack)
+    body.appendChild(row)
+  }
+
+  const axis = createElement('div', 'cmm-library-depth__axis')
+  for (const label of createIntegerTicks(maxValue)) {
+    axis.appendChild(createElement('span', undefined, String(label)))
+  }
+  body.appendChild(axis)
+  panel.append(title, body)
+  container.appendChild(panel)
+}
+
+const appendFreshnessChart = (
+  container: HTMLElement,
+  buckets: CoreAppLibraryFreshnessBucket[]
+): void => {
+  const panel = createElement('section', 'cmm-library-chart cmm-library-chart--freshness')
+  const title = createElement('h2', 'cmm-library-chart__title', 'Content Freshness (30d)')
+  const body = createElement('div', 'cmm-library-freshness')
+
+  if (buckets.length === 0) {
+    appendEmpty(body, 'No recent content activity', 'cmm-library-chart__empty')
+    panel.append(title, body)
+    container.appendChild(panel)
+    return
+  }
+
+  const plot = createElement('div', 'cmm-library-freshness__plot')
+  const maxTotal = Math.max(
+    1,
+    ...buckets.map(bucket => bucket.detections + toNumber(bucket.rules) + toNumber(bucket.intel))
+  )
+
+  for (const bucket of buckets) {
+    const column = createElement('div', 'cmm-library-freshness__bucket')
+    const stack = createElement('div', 'cmm-library-freshness__stack')
+    const total = bucket.detections + toNumber(bucket.rules) + toNumber(bucket.intel)
+    stack.style.height = `${Math.max(8, (total / maxTotal) * 100).toFixed(2)}%`
+    stack.setAttribute('aria-label', `${bucket.label || 'Freshness bucket'}: ${total}`)
+
+    const detections = createElement('span', 'cmm-library-freshness__segment')
+    detections.dataset.tone = 'cyan'
+    detections.style.flexGrow = String(bucket.detections)
+    const rules = createElement('span', 'cmm-library-freshness__segment')
+    rules.dataset.tone = 'green'
+    rules.style.flexGrow = String(toNumber(bucket.rules))
+    const intel = createElement('span', 'cmm-library-freshness__segment')
+    intel.dataset.tone = 'orange'
+    intel.style.flexGrow = String(toNumber(bucket.intel))
+
+    stack.append(detections, rules, intel)
+    column.appendChild(stack)
+    if (bucket.label.length > 0) {
+      column.appendChild(createElement('span', 'cmm-library-freshness__label', bucket.label))
+    }
+    plot.appendChild(column)
+  }
+
+  const axis = createElement('div', 'cmm-library-freshness__axis')
+  const axisMax = Math.max(
+    1,
+    ...buckets.map(bucket => bucket.detections + toNumber(bucket.rules) + toNumber(bucket.intel))
+  )
+  for (const label of createIntegerTicks(axisMax).reverse()) {
+    axis.appendChild(createElement('span', undefined, String(label)))
+  }
+
+  body.append(axis, plot)
+  panel.append(title, body)
+  container.appendChild(panel)
+}
+
+const appendCharts = (
+  container: HTMLElement,
+  data: Pick<NormalizedDashboardData, 'tacticDepth' | 'freshness'>
+): void => {
+  const charts = createElement('div', 'cmm-library-dashboard__charts')
+  appendTacticDepthChart(charts, data.tacticDepth)
+  appendFreshnessChart(charts, data.freshness)
+  container.appendChild(charts)
+}
+
+const connectorTone = (status: CoreAppLibraryConnectorStatus): string => {
+  if (status === 'active') return 'success'
+  if (status === 'error') return 'error'
+  if (status === 'paused') return 'warn'
+  return 'neutral'
+}
+
+const appendConnectorCard = (container: HTMLElement, connector: CoreAppLibraryConnector): void => {
+  const card = createElement('article', 'cmm-library-pipeline-card')
+  card.dataset.status = connector.status
+
+  const head = createElement('div', 'cmm-library-pipeline-card__head')
+  const nameWrap = createElement('div', 'cmm-library-pipeline-card__name-wrap')
+  const glyph = createElement('span', 'cmm-library-pipeline-card__glyph', '')
+  glyph.setAttribute('aria-hidden', 'true')
+  nameWrap.append(glyph, createElement('h3', 'cmm-library-pipeline-card__name', connector.name))
+
+  const badge = createElement(
+    'span',
+    'cmm-library-pipeline-card__badge',
+    connector.status[0]?.toUpperCase() + connector.status.slice(1)
+  )
+  badge.dataset.tone = connectorTone(connector.status)
+  head.append(nameWrap, badge)
+
+  const meta = createElement('div', 'cmm-library-pipeline-card__meta')
+  meta.appendChild(createElement('span', undefined, connector.schedule))
+  for (const tag of connector.tags) {
+    meta.appendChild(createElement('span', undefined, tag))
+  }
+
+  const foot = createElement('div', 'cmm-library-pipeline-card__foot')
+  foot.append(
+    createElement('span', undefined, connector.lastRun),
+    createElement('span', undefined, connector.enabled === false ? 'Disabled' : 'Enabled')
+  )
+
+  card.append(head, meta, foot)
+  container.appendChild(card)
+}
+
+const appendPipeline = (
+  container: HTMLElement,
+  data: Pick<NormalizedDashboardData, 'pipelineSummary' | 'connectors'>
+): void => {
+  const section = createElement('section', 'cmm-library-dashboard__pipeline')
+  const heading = createElement('div', 'cmm-library-dashboard__pipeline-heading')
+  heading.appendChild(createElement('h2', 'cmm-library-dashboard__eyebrow', 'Collection Pipeline'))
+
+  const summary = createElement('div', 'cmm-library-dashboard__pipeline-summary')
+  summary.append(
+    createElement('span', undefined, `${data.pipelineSummary.connectors} connectors`),
+    createElement('span', undefined, `${data.pipelineSummary.active} active`),
+    createElement('span', undefined, `${data.pipelineSummary.error} error`)
+  )
+  heading.appendChild(summary)
+
+  const grid = createElement('div', 'cmm-library-dashboard__pipeline-grid')
+  if (data.connectors.length === 0) {
+    appendEmpty(grid, 'No connectors configured')
+  } else {
+    for (const connector of data.connectors) {
+      appendConnectorCard(grid, connector)
+    }
+  }
+
+  section.append(heading, grid)
+  container.appendChild(section)
+}
+
+const appendDashboardState = (container: HTMLElement, title: string, detail?: string): void => {
+  const state = createElement('div', 'cmm-library-dashboard__state')
+  state.appendChild(createElement('h2', 'cmm-library-dashboard__state-title', title))
+  if (detail !== undefined && detail.length > 0) {
+    state.appendChild(createElement('p', 'cmm-library-dashboard__state-detail', detail))
+  }
+  container.appendChild(state)
+}
+
+const renderDashboard = (root: HTMLElement, data: NormalizedDashboardData): void => {
+  const titleId = getDashboardTitleId(root)
+  root.setAttribute('aria-labelledby', titleId)
+
+  const inner = createElement('div', 'cmm-library-dashboard__inner')
+  const header = createElement('header', 'cmm-library-dashboard__header')
+  const title = createElement('h1', 'cmm-library-dashboard__title', data.title)
+  title.id = titleId
+  header.append(title, createElement('p', 'cmm-library-dashboard__subtitle', data.subtitle))
+
+  inner.appendChild(header)
+  appendDashboardMeta(inner, data)
+  if (data.loading) {
+    appendDashboardState(inner, 'Loading library dashboard')
+    root.replaceChildren(inner)
+    return
+  }
+  if (data.error !== undefined) {
+    appendDashboardState(inner, 'Unable to load dashboard', data.error)
+    root.replaceChildren(inner)
+    return
+  }
+
+  appendMetricStrip(inner, data.metrics)
+  appendCharts(inner, data)
+  appendPipeline(inner, data)
+  root.replaceChildren(inner)
+}
+
+export function mountCoreAppLibraryDashboard(
+  options: CoreAppLibraryDashboardMountOptions
+): CoreAppLibraryDashboardMount {
+  const container = resolveContainer(options.container)
+  const element = createElement('section', 'cmm-library-dashboard')
+
+  if (options.className !== undefined && options.className.length > 0) {
+    element.classList.add(...options.className.split(/\s+/).filter(Boolean))
+  }
+
+  renderDashboard(element, normalizeDashboardData(options.data))
+
+  if (options.clearContainer !== false) {
+    container.replaceChildren(element)
+  } else {
+    container.appendChild(element)
+  }
+
+  return {
+    element,
+    update: (data: CoreAppLibraryDashboardData) => {
+      renderDashboard(element, normalizeDashboardData(data))
+    },
+    destroy: () => {
+      element.remove()
+    },
+  }
+}
+
+export function mountCoreAppLibraryDashboardFromDom(
+  options: CoreAppLibraryDashboardDomMountOptions = {}
+): CoreAppLibraryDashboardMount | null {
+  const root = options.root ?? document
+  const container = root.querySelector<HTMLElement>(options.selector ?? DEFAULT_DOM_SELECTOR)
+  if (container === null) {
+    return null
+  }
+
+  const dataElement = root.querySelector<HTMLElement>(options.dataSelector ?? DEFAULT_DATA_SELECTOR)
+  const mountOptions: CoreAppLibraryDashboardMountOptions = { container }
+  const data = options.data ?? parseDashboardData(dataElement)
+  if (data !== undefined) mountOptions.data = data
+  if (options.className !== undefined) mountOptions.className = options.className
+  if (options.clearContainer !== undefined) {
+    mountOptions.clearContainer = options.clearContainer
+  }
+
+  return mountCoreAppLibraryDashboard(mountOptions)
+}

package/src/layout/index.ts

@@ -43,6 +43,24 @@ export type {
   CoreAppSidebarPresetOptions,
   CoreAppTopbarPresetOptions,
 } from './core-app-chrome'
+export {
+  mountCoreAppLibraryDashboard,
+  mountCoreAppLibraryDashboardFromDom,
+} from './core-app-library-dashboard'
+export type {
+  CoreAppLibraryConnector,
+  CoreAppLibraryConnectorStatus,
+  CoreAppLibraryDashboardData,
+  CoreAppLibraryDashboardDomMountOptions,
+  CoreAppLibraryDashboardError,
+  CoreAppLibraryDashboardMount,
+  CoreAppLibraryDashboardMountOptions,
+  CoreAppLibraryFreshnessBucket,
+  CoreAppLibraryMetric,
+  CoreAppLibraryMetricTone,
+  CoreAppLibraryPipelineSummary,
+  CoreAppLibraryTacticDepth,
+} from './core-app-library-dashboard'
 export { PageHeader, createPageHeader } from './page-header'
 export type { PageHeaderConfig, PageHeaderMetadata } from './page-header'
 

package/src/react/brand/index.test.tsx

@@ -25,4 +25,14 @@ describe('React brand lockup', () => {
     expect(lockup?.querySelector('.cmm-diamond')).toBeTruthy()
     expect(lockup?.querySelector('.cmm-brand-lockup__wordmark')).toBeNull()
   })
+
+  it('supports the Threat Library title-case brand treatment', () => {
+    const { container } = render(<BrandLockup subtitle="Platform" wordmarkCase="title" />)
+    const lockup = container.querySelector('.cmm-brand-lockup')
+
+    expect(lockup?.classList.contains('cmm-brand-lockup--title')).toBe(true)
+    expect(lockup?.querySelector('.cmm-brand-lockup__counter')?.textContent).toBe('Counter')
+    expect(lockup?.querySelector('.cmm-brand-lockup__measure')?.textContent).toBe('Measure')
+    expect(lockup?.querySelector('.cmm-brand-lockup__subtitle')?.textContent).toBe('Platform')
+  })
 })

package/src/react/brand/index.tsx

@@ -163,6 +163,8 @@ export function Wordmark({
 export interface BrandLockupProps extends React.HTMLAttributes<HTMLSpanElement> {
   markSize?: BrandSize | number
   label?: string
+  subtitle?: string
+  wordmarkCase?: BrandLockupConfig['wordmarkCase']
   decorative?: boolean
   showWordmark?: boolean
 }
@@ -171,6 +173,8 @@ export function BrandLockup({
   className,
   markSize = 22,
   label = 'CounterMeasure',
+  subtitle,
+  wordmarkCase = 'uppercase',
   decorative = false,
   showWordmark = true,
   ...props
@@ -180,12 +184,29 @@ export function BrandLockup({
     : { role: 'img', 'aria-label': label }
 
   return (
-    <span className={cn('cmm-brand-lockup', className)} {...accessibilityProps} {...props}>
+    <span
+      className={cn(
+        'cmm-brand-lockup',
+        wordmarkCase === 'title' && 'cmm-brand-lockup--title',
+        className
+      )}
+      {...accessibilityProps}
+      {...props}
+    >
       <Diamond size={markSize} decorative />
       {showWordmark ? (
-        <span className="cmm-brand-lockup__wordmark" aria-hidden="true">
-          <span className="cmm-brand-lockup__counter">COUNTER</span>
-          <span className="cmm-brand-lockup__measure">MEASURE</span>
+        <span className="cmm-brand-lockup__copy" aria-hidden="true">
+          <span className="cmm-brand-lockup__wordmark">
+            <span className="cmm-brand-lockup__counter">
+              {wordmarkCase === 'title' ? 'Counter' : 'COUNTER'}
+            </span>
+            <span className="cmm-brand-lockup__measure">
+              {wordmarkCase === 'title' ? 'Measure' : 'MEASURE'}
+            </span>
+          </span>
+          {subtitle !== undefined ? (
+            <span className="cmm-brand-lockup__subtitle">{subtitle}</span>
+          ) : null}
         </span>
       ) : null}
     </span>

package/src/react/layout/core-app-chrome.test.tsx

@@ -28,9 +28,9 @@ describe('CoreAppChrome React wrapper', () => {
 
     expect(container.querySelector('[data-slot="core-app-chrome"]')).toBeTruthy()
     expect(sidebar?.classList.contains('sidebar--product')).toBe(true)
-    expect(sidebar?.getAttribute('data-sidebar')).toBe('cm')
+    expect(sidebar?.getAttribute('data-sidebar')).toBe('threat-library')
     expect(active?.classList.contains('sidebar__item--active')).toBe(true)
-    expect(topbar?.querySelector('.cmm-topbar__product')?.textContent).toBe('CounterMeasure Core')
+    expect(topbar?.querySelector('.cmm-topbar__product')?.textContent).toBe('Threat Library')
     expect(topbar?.querySelector('.cmm-topbar__current')?.textContent).toBe('Jobs')
     expect(container.querySelector('.sidebar__scope-current')?.textContent).toBe('All Tenants')
   })

package/src/react/layout/core-app-library-dashboard.test.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { CoreAppLibraryDashboard } from './core-app-library-dashboard'
+
+describe('CoreAppLibraryDashboard React wrapper', () => {
+  it('mounts the vanilla dashboard inside a React host', () => {
+    const { container } = render(
+      <CoreAppLibraryDashboard
+        data={{
+          title: 'React Library',
+          metrics: [{ id: 'total', label: 'Total', value: '12' }],
+        }}
+      />
+    )
+
+    expect(container.querySelector('[data-slot="core-app-library-dashboard"]')).toBeTruthy()
+    expect(container.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'React Library'
+    )
+    expect(container.querySelector('.cmm-library-metric__value')?.textContent).toBe('12')
+  })
+
+  it('updates the existing vanilla mount when data changes', () => {
+    const { container, rerender } = render(
+      <CoreAppLibraryDashboard data={{ title: 'First Library' }} />
+    )
+    const dashboard = container.querySelector('.cmm-library-dashboard')
+
+    expect(container.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'First Library'
+    )
+
+    rerender(<CoreAppLibraryDashboard data={{ title: 'Second Library' }} />)
+
+    expect(container.querySelector('.cmm-library-dashboard__title')?.textContent).toBe(
+      'Second Library'
+    )
+    expect(container.querySelector('.cmm-library-dashboard')).toBe(dashboard)
+    expect(container.querySelectorAll('.cmm-library-dashboard')).toHaveLength(1)
+  })
+})