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

package/src/react/primitives/score-ring.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from './utils'
+
+export interface ScoreRingProps extends HTMLAttributes<HTMLDivElement> {
+  score: number
+  size?: number
+  radius?: number
+  strokeWidth?: number
+  stroke?: string
+  trackStroke?: string
+  children?: ReactNode
+}
+
+const ScoreRing = forwardRef<HTMLDivElement, ScoreRingProps>(
+  (
+    {
+      score,
+      size = 132,
+      radius = 56,
+      strokeWidth = 6,
+      stroke = 'currentColor',
+      trackStroke = 'var(--border-2)',
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const clamped = Math.max(0, Math.min(100, score))
+    const circumference = 2 * Math.PI * radius
+    const offset = circumference - (clamped / 100) * circumference
+    const center = size / 2
+
+    return (
+      <div
+        ref={ref}
+        className={cn('relative inline-flex items-center justify-center', className)}
+        style={{ ...style, width: size, height: size }}
+        {...props}
+      >
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          className="-rotate-90"
+          aria-hidden="true"
+        >
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={trackStroke}
+            strokeWidth={strokeWidth}
+          />
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            className="transition-[stroke-dashoffset] duration-500 ease-out"
+          />
+        </svg>
+        {children && (
+          <div className="absolute inset-0 flex items-center justify-center">{children}</div>
+        )}
+      </div>
+    )
+  }
+)
+ScoreRing.displayName = 'ScoreRing'
+export { ScoreRing }

package/src/react/primitives/section-panel.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from './utils'
+
+export interface SectionPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: string
+  icon?: ReactNode
+  variant?: 'glass' | 'default'
+  headerRight?: ReactNode
+  children: ReactNode
+}
+
+const SectionPanel = forwardRef<HTMLDivElement, SectionPanelProps>(
+  ({ title, icon, variant = 'glass', headerRight, className, children, ...props }, ref) => {
+    const isGlass = variant === 'glass'
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'rounded-xl border',
+          isGlass
+            ? 'border-border-glass bg-glass'
+            : 'border-border bg-card text-card-foreground shadow-sm',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center gap-3 border-b border-inherit px-4 py-3">
+          {icon && (
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-foreground/[0.06] text-foreground-secondary [&>svg]:size-4">
+              {icon}
+            </div>
+          )}
+          <h3 className="text-foreground text-sm font-semibold">{title}</h3>
+          {headerRight && <div className="ml-auto">{headerRight}</div>}
+        </div>
+        <div className="p-4">{children}</div>
+      </div>
+    )
+  }
+)
+SectionPanel.displayName = 'SectionPanel'
+export { SectionPanel }

package/src/security/index.ts

@@ -3,6 +3,10 @@
  * @countermeasure/web-components/security
  */
 
+// MITRE ATT&CK reference data
+export { MITRE_TACTICS, TACTIC_SHORT_NAMES, TACTIC_IDS_BY_NAME } from './mitre-data'
+export type { MitreTacticDef } from './mitre-data'
+
 // CvssBadge
 export { CvssBadge } from './cvss-badge/index'
 export type { CvssBadgeConfig } from './cvss-badge/types'

package/src/security/mitre-data.ts

@@ -0,0 +1,60 @@
+/**
+ * MITRE ATT&CK Reference Data
+ *
+ * Shared constants for all 14 ATT&CK Enterprise tactics.
+ * Canonical source of tactic IDs, names, and abbreviations
+ * consumed by tenant-ui, threat-library, and web-components.
+ *
+ * @countermeasure/web-components/security/mitre-data
+ */
+
+/** A single MITRE ATT&CK tactic definition */
+export interface MitreTacticDef {
+  /** ATT&CK tactic ID (e.g. TA0001) */
+  readonly id: string
+  /** Full tactic name (e.g. "Initial Access") */
+  readonly name: string
+  /** Abbreviated name for compact UIs (e.g. "Initial") */
+  readonly shortName: string
+}
+
+/**
+ * All 14 MITRE ATT&CK Enterprise tactics in kill-chain order.
+ *
+ * Order follows the official ATT&CK matrix:
+ * Reconnaissance -> Resource Development -> Initial Access -> ... -> Impact
+ */
+export const MITRE_TACTICS: readonly MitreTacticDef[] = [
+  { id: 'TA0043', name: 'Reconnaissance', shortName: 'Recon' },
+  { id: 'TA0042', name: 'Resource Development', shortName: 'Resource' },
+  { id: 'TA0001', name: 'Initial Access', shortName: 'Initial' },
+  { id: 'TA0002', name: 'Execution', shortName: 'Exec' },
+  { id: 'TA0003', name: 'Persistence', shortName: 'Persist' },
+  { id: 'TA0004', name: 'Privilege Escalation', shortName: 'PrivEsc' },
+  { id: 'TA0005', name: 'Defense Evasion', shortName: 'DefEvas' },
+  { id: 'TA0006', name: 'Credential Access', shortName: 'Creds' },
+  { id: 'TA0007', name: 'Discovery', shortName: 'Disc' },
+  { id: 'TA0008', name: 'Lateral Movement', shortName: 'LatMov' },
+  { id: 'TA0009', name: 'Collection', shortName: 'Collect' },
+  { id: 'TA0011', name: 'Command and Control', shortName: 'C2' },
+  { id: 'TA0010', name: 'Exfiltration', shortName: 'Exfil' },
+  { id: 'TA0040', name: 'Impact', shortName: 'Impact' },
+] as const
+
+/**
+ * Map of full tactic name to its short abbreviation.
+ *
+ * Example: `TACTIC_SHORT_NAMES['Defense Evasion']` -> `'DefEvas'`
+ */
+export const TACTIC_SHORT_NAMES: Readonly<Record<string, string>> = Object.fromEntries(
+  MITRE_TACTICS.map((t) => [t.name, t.shortName]),
+)
+
+/**
+ * Map of full tactic name to its ATT&CK ID.
+ *
+ * Example: `TACTIC_IDS_BY_NAME['Initial Access']` -> `'TA0001'`
+ */
+export const TACTIC_IDS_BY_NAME: Readonly<Record<string, string>> = Object.fromEntries(
+  MITRE_TACTICS.map((t) => [t.name, t.id]),
+)

package/src/services/theme-engine/engine.test.ts

@@ -2,7 +2,6 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 
 import { FONT_STACKS, THEME_PRESETS, defaultTheme, ensureGoogleFont } from './index'
 import {
-  _resetCache,
   applyTheme,
   bootstrapTheme,
   findActivePresetId,
@@ -11,35 +10,14 @@ import {
   resetTheme,
   setThemeFull,
   setThemePartial,
-  teardownTheme,
   THEME_LS_KEY,
 } from './engine'
+import { setupThemeTest, teardownThemeTest } from './test-helpers'
 import type { Theme } from './types'
 
-function resetDom(): void {
-  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')
-  document.head.innerHTML = ''
-  document.body.innerHTML = ''
-}
-
 describe('theme engine', () => {
-  beforeEach(() => {
-    localStorage.clear()
-    teardownTheme()
-    _resetCache()
-    resetDom()
-  })
-
-  afterEach(() => {
-    teardownTheme()
-    _resetCache()
-    localStorage.clear()
-    resetDom()
-  })
+  beforeEach(() => setupThemeTest(false))
+  afterEach(() => teardownThemeTest())
 
   it('loads the default preset and returns a detached clone', () => {
     const first = defaultTheme()

package/src/services/theme-engine/engine.ts

@@ -80,15 +80,28 @@ export function loadTheme(): Theme {
   }
 }
 
+function sanitizeThemeEnums(theme: Theme): Theme {
+  const has = Object.prototype.hasOwnProperty
+  let t = theme
+  if (!has.call(COLOR_MODES, t.mode)) t = { ...t, mode: 'dark' }
+  if (!has.call(ACCENT_PALETTES, t.accent)) t = { ...t, accent: 'orange' }
+  if (!has.call(FONT_STACKS, t.font)) t = { ...t, font: 'inter' }
+  if (!has.call(ICON_SETS, t.iconSet)) t = { ...t, iconSet: 'lucide' }
+  const validDensities = ['compact', 'comfortable', 'cozy'] as const
+  if (!validDensities.includes(t.density)) t = { ...t, density: 'comfortable' }
+  return t
+}
+
 export function saveTheme(theme: Theme): void {
+  const sanitized = sanitizeThemeEnums(theme)
   try {
     if (typeof localStorage !== 'undefined') {
-      localStorage.setItem(THEME_LS_KEY, JSON.stringify(theme))
+      localStorage.setItem(THEME_LS_KEY, JSON.stringify(sanitized))
     }
   } catch {
     /* ignore */
   }
-  applyTheme(theme)
+  applyTheme(sanitized)
 }
 
 // ---------------------------------------------------------------------------
@@ -140,11 +153,16 @@ export function applyTheme(theme: Theme): void {
   root.style.setProperty('--bg-glass-2', `rgba(${tint}, ${t.toFixed(4)})`)
   root.style.setProperty('--bg-glass-3', `rgba(${tint}, ${(t * 1.75).toFixed(4)})`)
 
-  // 5) Brand / accent
-  root.style.setProperty('--brand', accent.brand)
-  root.style.setProperty('--brand-hot', accent.hot)
-  root.style.setProperty('--brand-soft', accent.soft)
-  root.style.setProperty('--accent-rgb', accent.rgb)
+  // 5) Brand / accent — Monokai overrides emerald with its signature green
+  const isMonokai = theme.mode === 'monokai'
+  const brandColor = isMonokai && theme.accent === 'emerald' ? '#a6e22e' : accent.brand
+  const brandHot = isMonokai && theme.accent === 'emerald' ? '#b8e85b' : accent.hot
+  const brandSoft = isMonokai && theme.accent === 'emerald' ? 'rgba(166,226,46,0.12)' : accent.soft
+  const brandRgb = isMonokai && theme.accent === 'emerald' ? '166,226,46' : accent.rgb
+  root.style.setProperty('--brand', brandColor)
+  root.style.setProperty('--brand-hot', brandHot)
+  root.style.setProperty('--brand-soft', brandSoft)
+  root.style.setProperty('--accent-rgb', brandRgb)
 
   // 6) Radius
   const r = clamp(Number(theme.radius) || 0, 0, 32)
@@ -153,9 +171,17 @@ export function applyTheme(theme: Theme): void {
   root.style.setProperty('--radius-lg', `${r * 1.5}px`)
   root.style.setProperty('--radius-xl', `${r * 2}px`)
 
-  // 7) Density row height
-  const rowHeight = theme.density === 'compact' ? 32 : theme.density === 'cozy' ? 42 : 36
+  // 7) Density tokens
+  const isCompact = theme.density === 'compact'
+  const isCozy = theme.density === 'cozy'
+  const rowHeight = isCompact ? 32 : isCozy ? 42 : 36
   root.style.setProperty('--density-row', `${rowHeight}px`)
+  root.style.setProperty('--density-padding-y', isCompact ? '0.375rem' : isCozy ? '0.75rem' : '0.55rem')
+  root.style.setProperty('--density-padding-x', isCompact ? '0.5rem' : isCozy ? '1rem' : '0.75rem')
+  root.style.setProperty('--density-gap', isCompact ? '0.25rem' : isCozy ? '0.625rem' : '0.5rem')
+  root.style.setProperty('--density-section-gap', isCompact ? '0.5rem' : isCozy ? '1.25rem' : '1rem')
+  root.style.setProperty('--density-font', isCompact ? '0.8125rem' : isCozy ? '0.9375rem' : '0.875rem')
+  root.style.setProperty('--density-icon', isCompact ? '1.75rem' : isCozy ? '2.5rem' : '2.25rem')
 
   // 8) Typography (lazy-load Google fonts, then write CSS vars)
   ensureGoogleFont(font.google)

package/src/services/theme-engine/fonts.ts

@@ -74,5 +74,9 @@ export function ensureGoogleFont(spec: string | null): void {
       .map(s => `family=${s}`)
       .join('&') +
     '&display=swap'
+  link.onerror = () => {
+    link.remove()
+    // Allow retry by removing the element so the ID check passes next time
+  }
   document.head.appendChild(link)
 }

package/src/services/theme-engine/icons.ts

@@ -56,23 +56,90 @@ export const ICON_SETS: Record<IconSetId, IconSet> = {
 
 /** Brand glyph paths — used when `iconSet === 'countermeasure'`. */
 export const CM_ICON_PATHS: Record<string, string> = {
+  // Shields & security
   Shield: 'M12 2l9 4-3 11-6 5-6-5-3-11z M12 7v10 M7.5 10l9 4 M16.5 10l-9 4',
   ShieldCheck: 'M12 2l9 4-3 11-6 5-6-5-3-11z M8.5 12l3 3 4-5',
   Crosshair:
-    'M12 12m-9 0a9 9 0 1 0 18 0 9 9 0 1 0-18 0 M12 12m-5 0a5 5 0 1 0 10 0 5 5 0 1 0-10 0 M22 12h-2 M4 12H2 M12 4V2 M12 22v-2 M12 12v.01',
+    'M12 2l9 5v10l-9 5-9-5V7z M12 7l5 5-5 5-5-5z M22 12h-2 M4 12H2 M12 4V2 M12 22v-2 M12 12v.01',
+  Target:
+    'M12 2l9 5v10l-9 5-9-5V7z M12 7l5 5-5 5-5-5z M12 10l2 2-2 2-2-2z',
+  Lock: 'M5 11h14v10H5z M8 11V7l4-5 4 5v4 M12 15l1 2h-2z',
+  KeyRound: 'M16 2l5 5-3 3-2-1-2 2-1-1-2 2H9v-2l7-8z M9 13v4h3',
+  Eye: 'M2 12l4-6h12l4 6-4 6H6z M12 9l3 3-3 3-3-3z',
+
+  // Status — hexagonal frames
+  CircleCheck: 'M12 2l9 5v10l-9 5-9-5V7z M9 12l2 2 4-4',
+  CircleX: 'M12 2l9 5v10l-9 5-9-5V7z M9 9l6 6 M15 9l-6 6',
+  CircleAlert: 'M12 2l9 5v10l-9 5-9-5V7z M12 8v5 M12 16h.01',
+  TriangleAlert: 'M12 2l10 18H2z M12 9v5 M12 17h.01',
+
+  // Threat & intel
   Bug: 'M12 3l4 5h-8z M12 8v13 M5 12l-2 2 2 2 M19 12l2 2-2 2 M8 21h8',
+  Skull: 'M12 3l8 7v6l-3 3v3h-2v-3h-2v3h-2v-3h-2v3H7v-3l-3-3v-6z M9 12h.01 M15 12h.01',
+  Radar: 'M12 2l10 10-10 10L2 12z M12 7l5 5-5 5-5-5z M12 12v.01',
+  Siren: 'M7 18l3-6h4l3 6z M12 2v4 M5 7l2 3 M19 7l-2 3 M4 21h16',
+
+  // Data & infrastructure
   Database: 'M4 4h16v5H4z M4 9.5h16v5H4z M4 15h16v5H4z M9 6.5h.01 M9 12h.01 M9 17.5h.01',
-  Plug: 'M12 2l4 4-4 4-4-4z M12 10v4 M9 14h6v3a3 3 0 0 1-3 3 3 3 0 0 1-3-3z',
+  Server: 'M3 3h18v7H3z M3 14h18v7H3z M7 6.5h.01 M7 17.5h.01 M17 6.5h-4 M17 17.5h-4',
+  Network: 'M9 2h6v5H9z M3 17h6v5H3z M15 17h6v5h-6z M12 7v4 M6 17v-3l6-3 6 3v3',
+  Globe: 'M12 2l9 5v10l-9 5-9-5V7z M12 2v20 M3 7l9 5 9-5 M3 17l9-5 9 5',
+
+  // Navigation & actions
+  Search: 'M11 4l5 3v6l-5 3-5-3V7z M20 21l-4-4',
+  Plus: 'M12 5v14 M5 12h14',
+  X: 'M6 6l12 12 M18 6L6 18',
+  ChevronDown: 'M5 9l7 7 7-7',
+  ChevronRight: 'M9 5l7 7-7 7',
+  Maximize2: 'M15 3h6v6 M3 15v6h6 M21 3l-7 7 M3 21l7-7',
+  ArrowUpRight: 'M7 7h10v10 M7 17L17 7',
+  Download: 'M12 3v13 M6 11l6 6 6-6 M4 21h16',
+  RefreshCw: 'M4 8h4V4 M20 16h-4v4 M8 4l8 0 4 4 M16 20l-8 0-4-4',
+  LogOut: 'M14 3h5v18h-5 M3 12h12 M11 8l4 4-4 4',
+  PanelLeftClose: 'M3 3h18v18H3z M9 3v18 M16 15l-3-3 3-3',
+
+  // Connectors & workflow
+  Plug: 'M12 2l4 4-4 4-4-4z M12 10v4 M9 14h6v3l-3 4-3-4z',
+  Workflow: 'M3 3h6v6H3z M15 15h6v6h-6z M21 3h-6v6h6z M6 9v3l6 3 6-3V9',
+  GitBranch: 'M6 3v12 M18 3v6 M6 18l3-3h6l3-3',
+
+  // Files & content
+  FileCode2: 'M6 2h8l5 5v14H6V2z M14 2v5h5 M10 13l-2 2 2 2 M14 13l2 2-2 2',
+  FileText: 'M6 2h8l5 5v14H6V2z M14 2v5h5 M9 13h6 M9 17h4',
+  Folder: 'M2 7l2-4h7l2 2h7l2 2v13H2z',
+  BookOpen: 'M2 3h8l2 2 2-2h8v16h-8l-2 2-2-2H2z M12 5v16',
+  Tag: 'M2 4h9l10 8-6 6-10-8V4z M6 8h.01',
+  Package: 'M12 2l9 5v10l-9 5-9-5V7z M12 12l9-5 M12 12v10 M12 12L3 7',
+  Boxes: 'M2 7l5-3 5 3v6l-5 3-5-3z M12 7l5-3 5 3v6l-5 3-5-3z M7 13l5 3 5-3',
+
+  // Analytics & data viz
+  BarChart3: 'M3 3v18h18 M8 21v-7 M13 21V8 M18 21v-4',
+  Gauge: 'M4 19l4-7 4 2 4-9 4 3 M2 21h20',
+  ListFilter: 'M2 5h20 M6 12h12 M9 19h6',
+  Grid3X3: 'M2 2h20v20H2z M2 9h20 M2 16h20 M9 2v20 M16 2v20',
+  LayoutGrid: 'M3 3h8v8H3z M13 3h8v8h-8z M3 13h8v8H3z M13 13h8v8h-8z',
+
+  // Tools & settings
+  Settings:
+    'M12 2l1.5 2.6L16 4l.5 3 3 .5L19 10l2.6 1.5L20 14l1 3-3 1-1 3-3-1-1.5 2.6L11 20l-1 2-3-1L6 18l-3-1 1-3-2.6-1.5L4 11 2 9.5 5 8l-1-3 3-1z M12 9l3 3-3 3-3-3z',
+  Cog: 'M12 2v2 M12 20v2 M4.93 4.93l1.41 1.41 M17.66 17.66l1.41 1.41 M2 12h2 M20 12h2 M4.93 19.07l1.41-1.41 M17.66 6.34l1.41-1.41 M12 8l4 4-4 4-4-4z',
+
+  // Objects & concepts
+  Lightbulb: 'M12 3l5 6-5 8-5-8z M9 18h6 M10 21h4',
   Sparkles: 'M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z',
   Rocket: 'M12 2l5 8h-3v8h-4v-8H7z M9 22h6',
-  Settings:
-    'M12 2l1.5 2.6L16 4l.5 3 3 .5L19 10l2.6 1.5L20 14l1 3-3 1-1 3-3-1-1.5 2.6L11 20l-1 2-3-1L6 18l-3-1 1-3-2.6-1.5L4 11 2 9.5 5 8l-1-3 3-1z M12 12m-3 0a3 3 0 1 0 6 0 3 3 0 1 0-6 0',
   Activity: 'M2 12h4l3 8 3-16 3 8 3-4h4',
-  Skull: 'M12 3l8 7v6l-3 3v3h-2v-3h-2v3h-2v-3h-2v3H7v-3l-3-3v-6z M9 12h.01 M15 12h.01',
-  Lightbulb: 'M12 3l5 6-5 8-5-8z M9 18h6 M10 21h4',
-  Target:
-    'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0 M12 12m-5 0a5 5 0 1 0 10 0 5 5 0 1 0-10 0 M12 7l3 3 M12 17l3-3',
-  Globe: 'M12 2l9 5v10l-9 5-9-5V7z M12 2v20 M3 7l9 5 9-5 M3 17l9-5 9 5',
+  Layers: 'M12 2l10 5-10 5L2 7z M2 12l10 5 10-5 M2 17l10 5 10-5',
+  Sun: 'M12 6l5 3v6l-5 3-5-3V9z M12 2v2 M12 20v2 M4 4l1.5 1.5 M18.5 18.5L20 20 M2 12h2 M20 12h2 M4 20l1.5-1.5 M18.5 5.5L20 4',
+  Clock: 'M12 2l9 5v10l-9 5-9-5V7z M12 7v5l3 3',
+  History: 'M12 2l9 5v10l-9 5-9-5V7z M12 7v5l3 2 M3 4l1 4h3',
+
+  // People & places
+  Users: 'M8 10l4 3-4 3V10z M14 7l4 3-4 3V7z M4 21v-2l4-2 4 2 4-2 4 2v2',
+  Building2: 'M6 22V4l6-2 6 2v18 M2 22h20 M10 8h4 M10 12h4 M10 16h4',
+
+  // Code & dev
+  Code2: 'M8 4L2 12l6 8 M16 4l6 8-6 8',
 }
 
 /** Semantic icon-usage slots driving the per-icon override matrix. */

package/src/services/theme-engine/palettes.ts

@@ -25,8 +25,8 @@ export const COLOR_MODES: Record<ColorMode, ColorModeMeta> = {
     id: 'monokai',
     label: 'Monokai',
     icon: 'Code2',
-    swatch: ['#0a0a0a', '#1a1a1a', '#272822'],
-    surfaceTint: '255, 255, 255',
+    swatch: ['#272822', '#3e3d32', '#49483e'],
+    surfaceTint: '248, 248, 242',
   },
   glass: {
     id: 'glass',

package/src/services/theme-engine/test-helpers.ts

@@ -0,0 +1,37 @@
+/**
+ * Shared test utilities for theme-engine tests.
+ *
+ * Provides common DOM reset, setup, and teardown helpers used across
+ * theme-studio-review.test.ts and engine.test.ts.
+ */
+
+import { _resetCache, applyTheme, teardownTheme } from './engine'
+import { defaultTheme } from './presets'
+
+/** Strip all theme-related attributes and content from the document. */
+export 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')
+}
+
+/** Clear storage, reset engine cache, reset DOM, optionally apply the default theme. */
+export function setupThemeTest(applyDefault = true): void {
+  localStorage.clear()
+  teardownTheme()
+  _resetCache()
+  resetDom()
+  if (applyDefault) applyTheme(defaultTheme())
+}
+
+/** Disconnect observer, reset cache, clear storage, reset DOM. */
+export function teardownThemeTest(): void {
+  teardownTheme()
+  _resetCache()
+  localStorage.clear()
+  resetDom()
+}

package/src/styles/layout.css

@@ -247,8 +247,8 @@
   display: flex;
   height: 100%;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1rem 0.75rem;
+  gap: var(--density-section-gap);
+  padding: var(--density-section-gap) var(--density-padding-x);
 }
 
 /* Sidebar Brand */
@@ -342,7 +342,7 @@
 }
 
 .cmm-sidebar__group {
-  padding: 0.75rem 0.75rem 0.25rem;
+  padding: var(--density-padding-y) var(--density-padding-x) 0.25rem;
 }
 
 .cmm-sidebar__heading {
@@ -364,10 +364,10 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--density-gap);
   border-radius: 0.75rem;
-  padding: 0.625rem 0.75rem;
-  font-size: 0.875rem;
+  padding: var(--density-padding-y) var(--density-padding-x);
+  font-size: var(--density-font);
   font-weight: 500;
   transition: all var(--transition-normal);
   color: hsl(var(--muted-foreground));
@@ -411,8 +411,8 @@
 /* Navigation Icons */
 .cmm-sidebar__icon {
   display: inline-flex;
-  height: 2.25rem;
-  width: 2.25rem;
+  height: var(--density-icon);
+  width: var(--density-icon);
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
@@ -437,7 +437,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 0.875rem;
+  font-size: var(--density-font);
   font-weight: 500;
   line-height: 1.2;
 }
@@ -459,9 +459,9 @@
 .cmm-user-menu__trigger {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--density-gap);
   width: 100%;
-  padding: 0.5rem;
+  padding: var(--density-padding-y);
   border-radius: 0.75rem;
   background: transparent;
   border: none;
@@ -476,15 +476,15 @@
 
 .cmm-user-menu__avatar {
   display: flex;
-  height: 2.25rem;
-  width: 2.25rem;
+  height: var(--density-icon);
+  width: var(--density-icon);
   align-items: center;
   justify-content: center;
   border-radius: 0.5rem;
   background: linear-gradient(to bottom right, hsl(var(--gradient-from)), hsl(var(--gradient-to)));
   color: white;
   font-weight: 600;
-  font-size: 0.875rem;
+  font-size: var(--density-font);
 }
 
 .cmm-user-menu__info {
@@ -547,10 +547,10 @@
 .cmm-user-menu__dropdown-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--density-gap);
   width: 100%;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
+  padding: var(--density-padding-y) var(--density-padding-x);
+  font-size: var(--density-font);
   color: hsl(var(--foreground));
   background: transparent;
   border: none;
@@ -601,7 +601,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0.75rem 1rem;
+  padding: var(--density-padding-y) var(--density-padding-x);
   background: transparent;
   border: none;
   cursor: pointer;