@countermeasure-platform/web-components 0.2.0

package/src/components/modal/index.ts

@@ -0,0 +1,240 @@
+/**
+ * Modal - Dialog overlay component with focus trapping
+ * @countermeasure/web-components/components/modal
+ */
+
+import DOMPurify from 'dompurify'
+import { type ModalConfig } from './types'
+import { createFocusTrap, type FocusTrap } from '../../utils/a11y'
+import { uniqueId } from '../../primitives/utils'
+
+export type { ModalConfig, ModalVariant } from './types'
+
+export class Modal {
+  private overlayEl: HTMLElement | null = null
+  private dialogEl: HTMLElement | null = null
+  private readonly config: ModalConfig
+  private readonly titleId: string
+  private isLoading = false
+  private focusTrap: FocusTrap | null = null
+
+  // Bound handlers for cleanup
+  private readonly handleKeyDown: (e: KeyboardEvent) => void
+
+  private constructor(config: ModalConfig) {
+    this.config = config
+    this.titleId = uniqueId('cmm-modal-title')
+    this.handleKeyDown = (e: KeyboardEvent) => {
+      this.onKeyDown(e)
+    }
+  }
+
+  /** Factory method: create and show a modal */
+  static open(config: ModalConfig): Modal {
+    const modal = new Modal(config)
+    modal.show()
+    return modal
+  }
+
+  /** Close the modal and remove from DOM */
+  close(): void {
+    document.removeEventListener('keydown', this.handleKeyDown)
+    this.focusTrap?.deactivate()
+    this.focusTrap = null
+
+    if (this.overlayEl) {
+      this.overlayEl.classList.remove('cmm-modal--open')
+
+      // Remove after transition
+      const overlay = this.overlayEl
+      setTimeout(() => {
+        overlay.remove()
+      }, 200)
+
+      this.overlayEl = null
+      this.dialogEl = null
+    }
+
+    this.config.onCancel?.()
+  }
+
+  /** Update the modal body content */
+  setBody(content: string | HTMLElement): void {
+    if (!this.dialogEl) {
+      return
+    }
+
+    const bodyEl = this.dialogEl.querySelector('.cmm-modal__body')
+    if (!bodyEl) {
+      return
+    }
+
+    if (typeof content === 'string') {
+      bodyEl.innerHTML = DOMPurify.sanitize(content)
+    } else {
+      bodyEl.innerHTML = ''
+      bodyEl.appendChild(content)
+    }
+  }
+
+  /** Set loading state: disables buttons during async confirm */
+  setLoading(loading: boolean): void {
+    this.isLoading = loading
+
+    if (!this.dialogEl) {
+      return
+    }
+
+    const buttons = this.dialogEl.querySelectorAll<HTMLButtonElement>('.cmm-modal__footer button')
+    buttons.forEach(btn => {
+      btn.disabled = loading
+    })
+  }
+
+  /** Build and show the modal DOM */
+  private show(): void {
+    // Overlay
+    const overlay = document.createElement('div')
+    overlay.className = 'cmm-modal'
+    this.overlayEl = overlay
+
+    // Backdrop click
+    const closeOnBackdrop = this.config.closeOnBackdrop !== false
+    if (closeOnBackdrop) {
+      overlay.addEventListener('click', (e: MouseEvent) => {
+        if (e.target === overlay) {
+          this.close()
+        }
+      })
+    }
+
+    // Dialog
+    const dialog = document.createElement('div')
+    dialog.className = 'cmm-modal__dialog'
+    dialog.setAttribute('role', 'dialog')
+    dialog.setAttribute('aria-modal', 'true')
+    dialog.setAttribute('aria-labelledby', this.titleId)
+    this.dialogEl = dialog
+
+    // Header
+    const header = document.createElement('div')
+    header.className = 'cmm-modal__header'
+
+    const title = document.createElement('h2')
+    title.className = 'cmm-modal__title'
+    title.id = this.titleId
+    title.textContent = this.config.title
+    header.appendChild(title)
+
+    const closeBtn = document.createElement('button')
+    closeBtn.className = 'cmm-modal__close'
+    closeBtn.textContent = '\u00D7'
+    closeBtn.setAttribute('aria-label', 'Close')
+    closeBtn.addEventListener('click', () => {
+      this.close()
+    })
+    header.appendChild(closeBtn)
+
+    dialog.appendChild(header)
+
+    // Body
+    const body = document.createElement('div')
+    body.className = 'cmm-modal__body'
+
+    if (this.config.body !== undefined) {
+      if (typeof this.config.body === 'string') {
+        body.innerHTML = DOMPurify.sanitize(this.config.body)
+      } else {
+        body.appendChild(this.config.body)
+      }
+    }
+
+    dialog.appendChild(body)
+
+    // Footer
+    const footer = document.createElement('div')
+    footer.className = 'cmm-modal__footer'
+
+    const variant = this.config.variant ?? 'confirm'
+
+    if (variant === 'alert') {
+      const okBtn = document.createElement('button')
+      okBtn.className = 'cmm-modal__btn cmm-modal__btn--primary'
+      okBtn.textContent = this.config.confirmLabel ?? 'OK'
+      okBtn.addEventListener('click', () => {
+        this.close()
+      })
+      footer.appendChild(okBtn)
+    } else {
+      // confirm or form: show cancel + confirm
+      const cancelBtn = document.createElement('button')
+      cancelBtn.className = 'cmm-modal__btn cmm-modal__btn--secondary'
+      cancelBtn.textContent = this.config.cancelLabel ?? 'Cancel'
+      cancelBtn.addEventListener('click', () => {
+        this.close()
+      })
+      footer.appendChild(cancelBtn)
+
+      const confirmBtn = document.createElement('button')
+      confirmBtn.className = 'cmm-modal__btn cmm-modal__btn--primary'
+      confirmBtn.textContent = this.config.confirmLabel ?? 'Confirm'
+      confirmBtn.addEventListener('click', () => {
+        void this.handleConfirm()
+      })
+      footer.appendChild(confirmBtn)
+    }
+
+    dialog.appendChild(footer)
+    overlay.appendChild(dialog)
+    document.body.appendChild(overlay)
+
+    // Show with transition
+    requestAnimationFrame(() => {
+      overlay.classList.add('cmm-modal--open')
+    })
+
+    // Keyboard handler (Escape to close)
+    const closeOnEscape = this.config.closeOnEscape !== false
+    if (closeOnEscape) {
+      document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    // Make dialog focusable as fallback and activate focus trap
+    dialog.setAttribute('tabindex', '-1')
+    this.focusTrap = createFocusTrap(dialog)
+    this.focusTrap.activate()
+  }
+
+  /** Handle the confirm button click, supporting async callbacks */
+  private async handleConfirm(): Promise<void> {
+    if (this.isLoading) {
+      return
+    }
+
+    if (this.config.onConfirm === undefined) {
+      this.close()
+      return
+    }
+
+    const result: void | Promise<void> = this.config.onConfirm()
+
+    // Check if the result is a promise
+    if (result !== undefined) {
+      this.setLoading(true)
+      try {
+        await result
+      } finally {
+        this.setLoading(false)
+      }
+    }
+
+    this.close()
+  }
+
+  /** Handle keyboard events for escape (focus trapping delegated to shared createFocusTrap) */
+  private onKeyDown(e: KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      this.close()
+    }
+  }
+}

package/src/components/modal/types.ts

@@ -0,0 +1,18 @@
+/**
+ * Modal type definitions
+ * @countermeasure/web-components/components/modal
+ */
+
+export type ModalVariant = 'confirm' | 'form' | 'alert'
+
+export interface ModalConfig {
+  title: string
+  variant?: ModalVariant
+  body?: string | HTMLElement
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm?: () => void | Promise<void>
+  onCancel?: () => void
+  closeOnBackdrop?: boolean
+  closeOnEscape?: boolean
+}

package/src/components/pagination/index.ts

@@ -0,0 +1,130 @@
+/**
+ * Pagination component
+ * @countermeasure/web-components/components/pagination
+ */
+
+export interface PaginationConfig {
+  container: HTMLElement | string
+  page?: number
+  hasMore?: boolean
+  onPageChange?: (page: number) => void
+}
+
+function resolveContainer(container: HTMLElement | string): HTMLElement {
+  if (typeof container === 'string') {
+    const el = document.querySelector(container)
+    if (!el) {
+      throw new Error(`Pagination: container not found for selector "${container}"`)
+    }
+    return el as HTMLElement
+  }
+  return container
+}
+
+export class Pagination {
+  private readonly config: PaginationConfig
+  private readonly containerEl: HTMLElement
+  private readonly rootEl: HTMLElement
+  private readonly prevBtn: HTMLButtonElement
+  private readonly nextBtn: HTMLButtonElement
+  private readonly infoEl: HTMLElement
+  private currentPage: number
+  private hasMore: boolean
+  private destroyed = false
+
+  constructor(config: PaginationConfig) {
+    this.config = config
+    this.containerEl = resolveContainer(config.container)
+    this.currentPage = config.page ?? 1
+    this.hasMore = config.hasMore === true
+
+    this.rootEl = document.createElement('div')
+    this.rootEl.className = 'cmm-pagination'
+
+    this.prevBtn = document.createElement('button')
+    this.prevBtn.className = 'cmm-pagination__button'
+    this.prevBtn.textContent = 'Previous'
+    this.prevBtn.addEventListener('click', this.handlePrev)
+
+    this.infoEl = document.createElement('span')
+    this.infoEl.className = 'cmm-pagination__info'
+
+    this.nextBtn = document.createElement('button')
+    this.nextBtn.className = 'cmm-pagination__button'
+    this.nextBtn.textContent = 'Next'
+    this.nextBtn.addEventListener('click', this.handleNext)
+
+    this.rootEl.appendChild(this.prevBtn)
+    this.rootEl.appendChild(this.infoEl)
+    this.rootEl.appendChild(this.nextBtn)
+    this.containerEl.appendChild(this.rootEl)
+
+    this.render()
+  }
+
+  setPage(page: number, hasMore?: boolean): void {
+    this.currentPage = page
+    if (hasMore !== undefined) {
+      this.hasMore = hasMore
+    }
+    this.render()
+  }
+
+  getPage(): number {
+    return this.currentPage
+  }
+
+  destroy(): void {
+    if (this.destroyed) {
+      return
+    }
+    this.destroyed = true
+
+    this.prevBtn.removeEventListener('click', this.handlePrev)
+    this.nextBtn.removeEventListener('click', this.handleNext)
+
+    if (this.rootEl.parentNode) {
+      this.rootEl.parentNode.removeChild(this.rootEl)
+    }
+  }
+
+  private render(): void {
+    this.infoEl.textContent = `Page ${String(this.currentPage)}`
+
+    if (this.currentPage <= 1) {
+      this.prevBtn.disabled = true
+      this.prevBtn.classList.add('cmm-pagination__button--disabled')
+    } else {
+      this.prevBtn.disabled = false
+      this.prevBtn.classList.remove('cmm-pagination__button--disabled')
+    }
+
+    if (this.hasMore) {
+      this.nextBtn.disabled = false
+      this.nextBtn.classList.remove('cmm-pagination__button--disabled')
+    } else {
+      this.nextBtn.disabled = true
+      this.nextBtn.classList.add('cmm-pagination__button--disabled')
+    }
+  }
+
+  private readonly handlePrev = (): void => {
+    if (this.currentPage > 1) {
+      this.currentPage -= 1
+      this.render()
+      if (this.config.onPageChange) {
+        this.config.onPageChange(this.currentPage)
+      }
+    }
+  }
+
+  private readonly handleNext = (): void => {
+    if (this.hasMore) {
+      this.currentPage += 1
+      this.render()
+      if (this.config.onPageChange) {
+        this.config.onPageChange(this.currentPage)
+      }
+    }
+  }
+}

package/src/components/search/command-palette.ts

@@ -0,0 +1,242 @@
+/**
+ * CommandPalette component - modal-style command palette
+ * @countermeasure/web-components/components/search
+ */
+
+import { type CommandEntry, type CommandPaletteConfig } from './types'
+
+function resolveKeybinding(keybinding: string): { ctrl: boolean; key: string } {
+  const parts = keybinding.toLowerCase().split('+')
+  let ctrl = false
+  let key = ''
+  for (const part of parts) {
+    const trimmed = part.trim()
+    if (trimmed === 'ctrl' || trimmed === 'meta' || trimmed === 'cmd') {
+      ctrl = true
+    } else {
+      key = trimmed
+    }
+  }
+  return { ctrl, key }
+}
+
+export class CommandPalette {
+  private commands: CommandEntry[]
+  private readonly overlayEl: HTMLElement
+  private readonly containerEl: HTMLElement
+  private readonly inputEl: HTMLInputElement
+  private readonly resultsEl: HTMLElement
+  private filteredCommands: CommandEntry[] = []
+  private activeIndex = 0
+  private destroyed = false
+
+  constructor(config: CommandPaletteConfig) {
+    this.commands = [...config.commands]
+
+    this.overlayEl = document.createElement('div')
+    this.overlayEl.className = 'cmm-command-palette__overlay'
+    this.overlayEl.style.display = 'none'
+
+    this.containerEl = document.createElement('div')
+    this.containerEl.className = 'cmm-command-palette'
+
+    this.inputEl = document.createElement('input')
+    this.inputEl.type = 'text'
+    this.inputEl.className = 'cmm-command-palette__input'
+    if (config.placeholder !== undefined) {
+      this.inputEl.placeholder = config.placeholder
+    } else {
+      this.inputEl.placeholder = 'Type a command...'
+    }
+
+    this.resultsEl = document.createElement('div')
+    this.resultsEl.className = 'cmm-command-palette__results'
+
+    this.containerEl.appendChild(this.inputEl)
+    this.containerEl.appendChild(this.resultsEl)
+    this.overlayEl.appendChild(this.containerEl)
+    document.body.appendChild(this.overlayEl)
+
+    this.inputEl.addEventListener('input', this.handleInput)
+    this.inputEl.addEventListener('keydown', this.handleKeyDown)
+    this.overlayEl.addEventListener('click', this.handleOverlayClick)
+
+    const keybinding = config.keybinding ?? 'ctrl+k'
+    document.addEventListener('keydown', this.createGlobalKeyHandler(keybinding))
+  }
+
+  open(): void {
+    if (this.destroyed) {
+      return
+    }
+    this.overlayEl.style.display = ''
+    this.inputEl.value = ''
+    this.activeIndex = 0
+    this.filteredCommands = [...this.commands]
+    this.renderResults()
+    this.inputEl.focus()
+  }
+
+  close(): void {
+    this.overlayEl.style.display = 'none'
+    this.inputEl.value = ''
+    this.filteredCommands = []
+    this.resultsEl.innerHTML = ''
+  }
+
+  setCommands(commands: CommandEntry[]): void {
+    this.commands = [...commands]
+  }
+
+  destroy(): void {
+    if (this.destroyed) {
+      return
+    }
+    this.destroyed = true
+
+    this.inputEl.removeEventListener('input', this.handleInput)
+    this.inputEl.removeEventListener('keydown', this.handleKeyDown)
+    this.overlayEl.removeEventListener('click', this.handleOverlayClick)
+    document.removeEventListener('keydown', this.globalKeyHandler)
+
+    if (this.overlayEl.parentNode) {
+      this.overlayEl.parentNode.removeChild(this.overlayEl)
+    }
+  }
+
+  private globalKeyHandler: (event: KeyboardEvent) => void = () => {
+    // Placeholder; replaced in createGlobalKeyHandler
+  }
+
+  private createGlobalKeyHandler(keybinding: string): (event: KeyboardEvent) => void {
+    const parsed = resolveKeybinding(keybinding)
+    this.globalKeyHandler = (event: KeyboardEvent) => {
+      const ctrlPressed = event.ctrlKey || event.metaKey
+      if (parsed.ctrl && ctrlPressed && event.key.toLowerCase() === parsed.key) {
+        event.preventDefault()
+        if (this.overlayEl.style.display === 'none') {
+          this.open()
+        } else {
+          this.close()
+        }
+      }
+    }
+    return this.globalKeyHandler
+  }
+
+  private readonly handleInput = (): void => {
+    const query = this.inputEl.value.toLowerCase().trim()
+
+    if (query.length === 0) {
+      this.filteredCommands = [...this.commands]
+    } else {
+      this.filteredCommands = this.commands.filter(cmd => cmd.label.toLowerCase().includes(query))
+    }
+
+    this.activeIndex = 0
+    this.renderResults()
+  }
+
+  private renderResults(): void {
+    this.resultsEl.innerHTML = ''
+
+    if (this.filteredCommands.length === 0) {
+      return
+    }
+
+    const groups = new Map<string, CommandEntry[]>()
+    const ungrouped: CommandEntry[] = []
+
+    for (const cmd of this.filteredCommands) {
+      if (cmd.group) {
+        let groupList = groups.get(cmd.group)
+        if (!groupList) {
+          groupList = []
+          groups.set(cmd.group, groupList)
+        }
+        groupList.push(cmd)
+      } else {
+        ungrouped.push(cmd)
+      }
+    }
+
+    let index = 0
+
+    const createItem = (cmd: CommandEntry, itemIndex: number): HTMLElement => {
+      const item = document.createElement('div')
+      item.className = 'cmm-command-palette__item'
+      if (itemIndex === this.activeIndex) {
+        item.classList.add('cmm-command-palette__item--active')
+      }
+
+      const labelText = document.createElement('span')
+      labelText.textContent = cmd.label
+      item.appendChild(labelText)
+
+      if (cmd.keybinding) {
+        const kbEl = document.createElement('span')
+        kbEl.className = 'cmm-command-palette__keybinding'
+        kbEl.textContent = cmd.keybinding
+        item.appendChild(kbEl)
+      }
+
+      item.addEventListener('click', () => {
+        this.executeCommand(cmd)
+      })
+
+      return item
+    }
+
+    if (ungrouped.length > 0) {
+      for (const cmd of ungrouped) {
+        this.resultsEl.appendChild(createItem(cmd, index))
+        index += 1
+      }
+    }
+
+    for (const [groupName, groupCommands] of groups) {
+      const groupHeader = document.createElement('div')
+      groupHeader.className = 'cmm-command-palette__group'
+      groupHeader.textContent = groupName
+      this.resultsEl.appendChild(groupHeader)
+
+      for (const cmd of groupCommands) {
+        this.resultsEl.appendChild(createItem(cmd, index))
+        index += 1
+      }
+    }
+  }
+
+  private executeCommand(cmd: CommandEntry): void {
+    this.close()
+    cmd.handler()
+  }
+
+  private readonly handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      if (this.filteredCommands.length > 0) {
+        this.activeIndex = Math.min(this.activeIndex + 1, this.filteredCommands.length - 1)
+        this.renderResults()
+      }
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      this.activeIndex = Math.max(this.activeIndex - 1, 0)
+      this.renderResults()
+    } else if (event.key === 'Enter') {
+      event.preventDefault()
+      const selected = this.filteredCommands[this.activeIndex]
+      if (selected) {
+        this.executeCommand(selected)
+      }
+    } else if (event.key === 'Escape') {
+      this.close()
+    }
+  }
+
+  private readonly handleOverlayClick = (event: MouseEvent): void => {
+    if (event.target === this.overlayEl) {
+      this.close()
+    }
+  }
+}