@countermeasure-platform/web-components 1.2.1-dev.4.1 → 1.2.1-dev.6.1

package/src/components/theme/theme-studio-review.test.ts

@@ -0,0 +1,253 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import {
+  _resetCache,
+  applyTheme,
+  getTheme,
+  saveTheme,
+  setThemePartial,
+  teardownTheme,
+} from '../../services/theme-engine/engine'
+import { defaultTheme } from '../../services/theme-engine/presets'
+import { setupThemeTest, teardownThemeTest } from '../../services/theme-engine/test-helpers'
+import type { Theme } from '../../services/theme-engine/types'
+import { GlassSlider } from './glass-slider'
+import { IconGalleryBrowser } from './icon-gallery-browser'
+import { IconSetPicker } from './icon-set-picker'
+import { RadiusSlider } from './radius-slider'
+
+function resetDom(): void {
+  document.head.innerHTML = ''
+  document.body.innerHTML = ''
+  document.documentElement.removeAttribute('data-theme')
+  document.documentElement.removeAttribute('data-accent')
+  document.documentElement.removeAttribute('data-density')
+  document.documentElement.removeAttribute('data-icon-set')
+  document.documentElement.removeAttribute('style')
+}
+
+function requireButton(root: ParentNode, selector: string): HTMLButtonElement {
+  const html = root.querySelector(selector)
+  if (!(html instanceof HTMLButtonElement)) {
+    throw new Error(`Expected ${selector} to match a button`)
+  }
+  return html
+}
+
+function requireElement(root: ParentNode, selector: string): HTMLElement {
+  const html = root.querySelector(selector)
+  if (!(html instanceof HTMLElement)) {
+    throw new Error(`Expected ${selector} to match an element`)
+  }
+  return html
+}
+
+
+describe('GlassSlider duplicate DOM id', () => {
+  beforeEach(() => setupThemeTest())
+  afterEach(() => teardownThemeTest())
+
+  it('assigns unique IDs when multiple instances exist', () => {
+    const slider1 = new GlassSlider()
+    const slider2 = new GlassSlider({ expanded: true })
+    document.body.appendChild(slider1.el)
+    document.body.appendChild(slider2.el)
+
+    const allValueSpans = document.querySelectorAll('.preview-glass-slider__value[id]')
+    expect(allValueSpans).toHaveLength(2)
+
+    const id1 = (allValueSpans[0] as HTMLElement).id
+    const id2 = (allValueSpans[1] as HTMLElement).id
+    expect(id1).not.toBe(id2)
+
+    const input1 = slider1.el.querySelector('input') as HTMLInputElement
+    expect(input1.getAttribute('aria-describedby')).toBe(id1)
+
+    const input2 = slider2.el.querySelector('input') as HTMLInputElement
+    expect(input2.getAttribute('aria-describedby')).toBe(id2)
+
+    slider1.destroy()
+    slider2.destroy()
+  })
+})
+
+describe('RadiusSlider destroy cancels pending rAF', () => {
+  beforeEach(() => setupThemeTest())
+  afterEach(() => teardownThemeTest())
+
+  it('does not fire setThemePartial after destroy', async () => {
+    const slider = new RadiusSlider()
+    document.body.appendChild(slider.el)
+
+    const input = slider.el.querySelector('.preview-radius-slider__input') as HTMLInputElement
+    input.value = '18'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+
+    slider.destroy()
+
+    const themeBefore = getTheme().radius
+
+    await new Promise(resolve => requestAnimationFrame(resolve))
+    await new Promise(resolve => setTimeout(resolve, 50))
+
+    expect(getTheme().radius).toBe(themeBefore)
+  })
+})
+
+describe('RadiusSlider input handling', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    teardownTheme()
+    _resetCache()
+    resetDom()
+    applyTheme(defaultTheme())
+  })
+
+  afterEach(() => {
+    teardownTheme()
+    _resetCache()
+    localStorage.clear()
+    resetDom()
+  })
+
+  it('updates radius immediately on input', () => {
+    const slider = new RadiusSlider()
+    document.body.appendChild(slider.el)
+
+    const input = slider.el.querySelector('.preview-radius-slider__input') as HTMLInputElement
+    input.value = '18'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+
+    expect(getTheme().radius).toBe(18)
+  })
+})
+
+describe('IconGalleryBrowser accessibility', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    teardownTheme()
+    _resetCache()
+    resetDom()
+    applyTheme(defaultTheme())
+  })
+
+  afterEach(() => {
+    teardownTheme()
+    _resetCache()
+    localStorage.clear()
+    resetDom()
+  })
+
+  it('marks gallery controls and icon cells for assistive technology', () => {
+    const picker = new IconGalleryBrowser()
+    document.body.appendChild(picker.el)
+
+    setThemePartial({ iconSet: 'countermeasure' })
+    requireButton(picker.el, '.theme-studio-icon-gallery__toggle').click()
+
+    expect(requireButton(picker.el, '.theme-studio-icon-gallery__toggle').getAttribute('aria-expanded')).toBe('true')
+    expect(
+      requireButton(picker.el, '.theme-studio-icon-gallery__toggle').querySelector('svg')?.getAttribute('aria-hidden')
+    ).toBe('true')
+    expect(requireElement(picker.el, '.theme-studio-icon-gallery__cell').getAttribute('role')).toBe('img')
+    expect(requireElement(picker.el, '.theme-studio-icon-gallery__cell').tabIndex).toBe(0)
+
+    picker.destroy()
+  })
+})
+
+describe('IconSetPicker event listener cleanup', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    teardownTheme()
+    _resetCache()
+    resetDom()
+    applyTheme(defaultTheme())
+  })
+
+  afterEach(() => {
+    teardownTheme()
+    _resetCache()
+    localStorage.clear()
+    resetDom()
+  })
+
+  it('removes cm:theme-change listener on destroy', () => {
+    const picker = new IconSetPicker()
+    document.body.appendChild(picker.el)
+
+    // The picker should have a destroy method
+    expect(typeof picker.destroy).toBe('function')
+
+    // After destroy, theme changes should not update the picker
+    picker.destroy()
+
+    // Change the theme - if listener leaked, the picker would still react
+    setThemePartial({ iconSet: 'countermeasure' })
+
+    // Verify the picker tiles are NOT updated (the 'is-active' class should
+    // still reflect the old state, not the new one)
+    const activeTile = picker.el.querySelector('.theme-studio-icon-tile.is-active')
+    // After destroy + theme change, the active tile should still show the old
+    // state (not 'countermeasure') because the listener was removed
+    if (activeTile) {
+      expect(activeTile.getAttribute('data-icon-set')).not.toBe('countermeasure')
+    }
+  })
+})
+
+describe('IconSetPicker decorative SVG accessibility', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    teardownTheme()
+    _resetCache()
+    resetDom()
+    applyTheme(defaultTheme())
+  })
+
+  afterEach(() => {
+    teardownTheme()
+    _resetCache()
+    localStorage.clear()
+    resetDom()
+  })
+
+  it('marks preview SVGs as aria-hidden', () => {
+    const picker = new IconSetPicker()
+    document.body.appendChild(picker.el)
+
+    const svgs = picker.el.querySelectorAll('.theme-studio-icon-tile__row')
+    expect(svgs.length).toBeGreaterThan(0)
+
+    for (const svg of svgs) {
+      expect(svg.getAttribute('aria-hidden')).toBe('true')
+    }
+
+    picker.destroy()
+  })
+})
+
+describe('applyTheme persists sanitized values', () => {
+  beforeEach(() => setupThemeTest(false))
+  afterEach(() => teardownThemeTest())
+
+  it('applies sanitized defaults when invalid enum values are passed', () => {
+    const corrupted: Theme = {
+      ...defaultTheme(),
+      mode: 'invalid-mode' as Theme['mode'],
+      accent: 'bogus-accent' as Theme['accent'],
+    }
+
+    saveTheme(corrupted)
+
+    // saveTheme sanitizes enum fields before persisting. Reload from
+    // localStorage to verify the round-trip preserves safe defaults.
+    _resetCache()
+    const reloaded = getTheme()
+    applyTheme(reloaded)
+
+    // After applyTheme, the DOM reflects sanitized values.
+    const root = document.documentElement
+    expect(root.getAttribute('data-theme')).toBe('dark')
+  })
+})

package/src/components/theme/theme-studio.ts

@@ -3,6 +3,7 @@ import { AccentSwitcher } from './accent-switcher'
 import { DensitySwitcher } from './density-switcher'
 import { FontStackPicker } from './font-stack-picker'
 import { GlassSlider } from './glass-slider'
+import { IconGalleryBrowser } from './icon-gallery-browser'
 import { IconSetPicker } from './icon-set-picker'
 import { IconUsageMatrix } from './icon-usage-matrix'
 import { RadiusSlider } from './radius-slider'
@@ -73,62 +74,10 @@ function buildResetLink(): HTMLButtonElement {
   return button
 }
 
-function buildAdvanced(): HTMLElement {
-  const wrap = el('div', 'theme-studio-advanced')
-
-  const densityRow = el('div', 'theme-studio-advanced__row')
-  densityRow.appendChild(new DensitySwitcher().el)
-  wrap.appendChild(densityRow)
-
-  const radiusRow = el('div', 'theme-studio-advanced__row')
-  radiusRow.appendChild(new RadiusSlider().el)
-  wrap.appendChild(radiusRow)
-
-  const matrixHead = el('div', 'theme-studio-advanced__matrix-head')
-  matrixHead.appendChild(el('h4', 'theme-studio-advanced__matrix-title', 'Per-icon mapping'))
-  matrixHead.appendChild(
-    el(
-      'p',
-      'theme-studio-advanced__matrix-helper',
-      'Rebind any icon slot. Useful if your team thinks of detection as a bug instead of a shield.'
-    )
-  )
-  wrap.appendChild(matrixHead)
-
-  wrap.appendChild(new IconUsageMatrix().el)
-  return wrap
-}
-
-function buildAdvancedSection(): HTMLElement {
-  const details = document.createElement('details')
-  details.className = 'theme-studio-section theme-studio-section--advanced'
-
-  const summary = document.createElement('summary')
-  summary.className = 'theme-studio-section__head theme-studio-section__head--summary'
-
-  const titles = el('div', 'theme-studio-section__titles')
-  titles.appendChild(el('h3', 'theme-studio-section__title', 'Advanced'))
-  titles.appendChild(
-    el('div', 'theme-studio-section__helper', 'Density, corner radius, and per-icon overrides')
-  )
-  summary.appendChild(titles)
-
-  const toggle = el('span', 'theme-studio-section__chev', 'Show')
-  summary.appendChild(toggle)
-
-  details.appendChild(summary)
-  details.appendChild(buildAdvanced())
-
-  details.addEventListener('toggle', () => {
-    toggle.textContent = details.open ? 'Hide' : 'Show'
-  })
-
-  return details
-}
-
 export class ThemeStudio {
   public readonly el: HTMLElement
   private readonly options: Required<ThemeStudioOptions>
+  private children: Array<{ el: HTMLElement; destroy?: () => void }> = []
 
   constructor(options: ThemeStudioOptions = {}) {
     this.options = { ...DEFAULT_OPTIONS, ...options }
@@ -138,6 +87,9 @@ export class ThemeStudio {
   }
 
   render(): void {
+    for (const child of this.children) child.destroy?.()
+    this.children = []
+
     this.el.innerHTML = ''
 
     if (this.options.showTabs) {
@@ -157,52 +109,75 @@ export class ThemeStudio {
       this.el.appendChild(header)
     }
 
+    const presetGrid = new ThemePresetGrid()
+    this.children.push(presetGrid)
     this.el.appendChild(
       buildSection(
         'Start from a preset',
         'Curated combinations of mode, accent, font, and icon style.',
-        new ThemePresetGrid().el,
+        presetGrid.el,
         buildResetLink()
       )
     )
 
+    const previewTile = new ThemePreviewTile()
+    this.children.push(previewTile)
     this.el.appendChild(
       buildSection(
         'Live preview',
         'A miniature app shell that re-renders as you tweak settings below.',
-        new ThemePreviewTile().el
+        previewTile.el
       )
     )
 
+    const themeSwitcher = new ThemeSwitcher()
+    this.children.push(themeSwitcher)
     this.el.appendChild(
-      buildSection('Color Mode', 'Choose how the interface looks.', new ThemeSwitcher().el)
+      buildSection('Color Mode', 'Choose how the interface looks.', themeSwitcher.el)
     )
+
+    const accentSwitcher = new AccentSwitcher()
+    this.children.push(accentSwitcher)
     this.el.appendChild(
       buildSection(
         'Accent Color',
         'Pick a color that highlights actions and links.',
-        new AccentSwitcher().el
+        accentSwitcher.el
       )
     )
+
+    const glassSlider = new GlassSlider({ expanded: true })
+    this.children.push(glassSlider)
     this.el.appendChild(
       buildSection(
         'Surface Transparency',
         'How translucent panels, hover states, and overlays appear.',
-        new GlassSlider({ expanded: true }).el
+        glassSlider.el
       )
     )
+
+    const fontStackPicker = new FontStackPicker()
+    this.children.push(fontStackPicker)
     this.el.appendChild(
       buildSection(
         'Typography',
         'Select the typeface used throughout the app.',
-        new FontStackPicker().el
+        fontStackPicker.el
       )
     )
+
+    const iconSetPicker = new IconSetPicker()
+    const iconGalleryBrowser = new IconGalleryBrowser()
+    this.children.push(iconSetPicker)
+    this.children.push(iconGalleryBrowser)
+    const iconSetBody = el('div', 'theme-studio-iconsets-wrap')
+    iconSetBody.appendChild(iconSetPicker.el)
+    iconSetBody.appendChild(iconGalleryBrowser.el)
     this.el.appendChild(
       buildSection(
         'Icon Set',
         'Choose the icon style for navigation and content.',
-        new IconSetPicker().el
+        iconSetBody
       )
     )
 
@@ -219,7 +194,71 @@ export class ThemeStudio {
         buildSection('Brand', 'Logo, wordmark, and brand glyph references.', brandBody)
       )
     }
-    this.el.appendChild(buildAdvancedSection())
+    this.el.appendChild(this.buildAdvancedSection())
+  }
+
+  private buildAdvancedSection(): HTMLElement {
+    const details = document.createElement('details')
+    details.className = 'theme-studio-section theme-studio-section--advanced'
+
+    const summary = document.createElement('summary')
+    summary.className = 'theme-studio-section__head theme-studio-section__head--summary'
+
+    const titles = el('div', 'theme-studio-section__titles')
+    titles.appendChild(el('h3', 'theme-studio-section__title', 'Advanced'))
+    titles.appendChild(
+      el('div', 'theme-studio-section__helper', 'Density, corner radius, and per-icon overrides')
+    )
+    summary.appendChild(titles)
+
+    const toggle = el('span', 'theme-studio-section__chev', 'Show')
+    summary.appendChild(toggle)
+
+    details.appendChild(summary)
+    details.appendChild(this.buildAdvanced())
+
+    details.addEventListener('toggle', () => {
+      toggle.textContent = details.open ? 'Hide' : 'Show'
+    })
+
+    return details
+  }
+
+  private buildAdvanced(): HTMLElement {
+    const wrap = el('div', 'theme-studio-advanced')
+
+    const densitySwitcher = new DensitySwitcher()
+    this.children.push(densitySwitcher)
+    const densityRow = el('div', 'theme-studio-advanced__row')
+    densityRow.appendChild(densitySwitcher.el)
+    wrap.appendChild(densityRow)
+
+    const radiusSlider = new RadiusSlider()
+    this.children.push(radiusSlider)
+    const radiusRow = el('div', 'theme-studio-advanced__row')
+    radiusRow.appendChild(radiusSlider.el)
+    wrap.appendChild(radiusRow)
+
+    const matrixHead = el('div', 'theme-studio-advanced__matrix-head')
+    matrixHead.appendChild(el('h4', 'theme-studio-advanced__matrix-title', 'Per-icon mapping'))
+    matrixHead.appendChild(
+      el(
+        'p',
+        'theme-studio-advanced__matrix-helper',
+        'Rebind any icon slot. Useful if your team thinks of detection as a bug instead of a shield.'
+      )
+    )
+    wrap.appendChild(matrixHead)
+
+    const iconUsageMatrix = new IconUsageMatrix()
+    this.children.push(iconUsageMatrix)
+    wrap.appendChild(iconUsageMatrix.el)
+    return wrap
+  }
+
+  destroy(): void {
+    for (const child of this.children) child.destroy?.()
+    this.children = []
   }
 }
 

package/src/components/theme/theme-switcher.ts

@@ -16,6 +16,7 @@ const THEMES: ResolvedTheme[] = ['light', 'dark', 'monokai', 'glass']
 
 export class ThemeSwitcher {
   public readonly el: HTMLElement
+  private readonly _onThemeChange: () => void
 
   constructor() {
     this.el = document.createElement('div')
@@ -50,10 +51,15 @@ export class ThemeSwitcher {
     }
 
     this.el.appendChild(buttons)
-    document.addEventListener('cm:theme-change', () => this.updateActive())
+    this._onThemeChange = () => this.updateActive()
+    document.addEventListener('cm:theme-change', this._onThemeChange)
     this.updateActive()
   }
 
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
+  }
+
   private updateActive(): void {
     const current = getTheme().mode
     const buttons = this.el.querySelectorAll<HTMLButtonElement>('.preview-theme-switcher__btn')

package/src/index.ts

@@ -213,3 +213,14 @@ export * from './visualization/index'
 
 // Security
 export * from './security/index'
+
+// Shared types
+export type {
+  TacticCoverage,
+  TechniqueGap,
+  DetectionSource,
+  EnvironmentVisibility,
+  VisibilityGap,
+  ValidationBySource,
+  ValidationIssue,
+} from './types/index'

package/src/react/layout/browser-layout.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../primitives/utils'
+
+export interface BrowserLayoutProps extends HTMLAttributes<HTMLDivElement> {
+  toolbar?: ReactNode
+  sidebar?: ReactNode
+  sidebarWidth?: string
+  detail?: ReactNode
+  detailWidth?: string
+  children: ReactNode
+}
+
+const BrowserLayout = forwardRef<HTMLDivElement, BrowserLayoutProps>(
+  (
+    {
+      toolbar,
+      sidebar,
+      sidebarWidth = '240px',
+      detail,
+      detailWidth = '400px',
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => (
+    <div ref={ref} className={cn('flex h-full flex-col', className)} {...props}>
+      {toolbar && (
+        <div className="shrink-0 border-b border-border-glass px-4 py-3">{toolbar}</div>
+      )}
+      <div className="flex min-h-0 flex-1">
+        {sidebar && (
+          <aside
+            className="shrink-0 overflow-y-auto border-r border-border-glass p-3"
+            style={{ width: sidebarWidth }}
+          >
+            {sidebar}
+          </aside>
+        )}
+        <div className="min-w-0 flex-1 overflow-y-auto">{children}</div>
+        {detail && (
+          <aside
+            className="shrink-0 overflow-y-auto border-l border-border-glass"
+            style={{ width: detailWidth }}
+          >
+            {detail}
+          </aside>
+        )}
+      </div>
+    </div>
+  )
+)
+BrowserLayout.displayName = 'BrowserLayout'
+export { BrowserLayout }

package/src/react/layout/detail-header.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../primitives/utils'
+
+export interface DetailHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  icon?: ReactNode
+  title: ReactNode
+  subtitle?: ReactNode
+  badges?: ReactNode[]
+  actions?: ReactNode
+  trailing?: ReactNode
+  backAction?: ReactNode
+}
+
+const DetailHeader = forwardRef<HTMLElement, DetailHeaderProps>(
+  ({ icon, title, subtitle, badges, actions, trailing, backAction, className, ...props }, ref) => (
+    <header ref={ref} className={cn('flex flex-col gap-4 pb-4', className)} {...props}>
+      {backAction && <div>{backAction}</div>}
+      <div className="flex items-start gap-4">
+        {icon && (
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-foreground/[0.06] text-foreground-secondary [&>svg]:size-6">
+            {icon}
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-3">
+            <h1 className="truncate text-xl font-bold tracking-tight text-foreground">{title}</h1>
+            {badges && badges.length > 0 && (
+              <div className="flex shrink-0 items-center gap-1.5">{badges}</div>
+            )}
+          </div>
+          {subtitle && (
+            <p className="mt-0.5 text-sm text-foreground-secondary">{subtitle}</p>
+          )}
+        </div>
+        {trailing && <div className="shrink-0">{trailing}</div>}
+        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+      </div>
+    </header>
+  )
+)
+DetailHeader.displayName = 'DetailHeader'
+export { DetailHeader }

package/src/react/layout/index.ts

@@ -1,2 +1,6 @@
 export { AppShell, type AppShellProps } from './app-shell'
+export { BrowserLayout, type BrowserLayoutProps } from './browser-layout'
+export { DetailHeader, type DetailHeaderProps } from './detail-header'
 export { PageHeader, type PageHeaderProps } from './page-header'
+export { SubNav, type SubNavItem, type SubNavProps } from './sub-nav'
+export { PageFrame, type PageFrameProps } from './page-frame'

package/src/react/layout/page-frame.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../primitives/utils'
+
+export interface PageFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: string
+  subtitle?: string
+  actions?: ReactNode
+  nav?: ReactNode
+  children: ReactNode
+}
+
+const PageFrame = forwardRef<HTMLDivElement, PageFrameProps>(
+  ({ title, subtitle, actions, nav, className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('flex min-h-full flex-col', className)} {...props}>
+      <div className="border-b border-border-glass/50 px-6 pb-3 pt-5">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <h1 className="text-xl font-bold tracking-tight text-foreground">{title}</h1>
+            {subtitle && (
+              <p className="mt-0.5 text-xs text-foreground-tertiary">{subtitle}</p>
+            )}
+          </div>
+          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        </div>
+        {nav && <div className="mt-4">{nav}</div>}
+      </div>
+      <main className="flex-1 space-y-4 px-4 py-4 lg:px-6">{children}</main>
+    </div>
+  )
+)
+PageFrame.displayName = 'PageFrame'
+export { PageFrame }