@countermeasure-platform/web-components 0.2.0

package/dist/display/hover-card/index.js

@@ -0,0 +1,112 @@
+import { t as e } from "../../purify.es-oNgIHWpC.js";
+import { n as t } from "../../utils-Cn_W3h3f.js";
+//#region src/display/hover-card/index.ts
+function n(e) {
+	switch (e) {
+		case "top": return "bottom";
+		case "bottom": return "top";
+		case "left": return "right";
+		case "right": return "left";
+	}
+}
+var r = 8, i = class {
+	trigger;
+	placement;
+	openDelay;
+	closeDelay;
+	className;
+	cardId;
+	cardEl = null;
+	contentEl = null;
+	arrowEl = null;
+	content;
+	showTimeoutId = null;
+	hideTimeoutId = null;
+	destroyed = !1;
+	handleTriggerMouseEnter;
+	handleTriggerMouseLeave;
+	handleCardMouseEnter;
+	handleCardMouseLeave;
+	constructor(e) {
+		this.trigger = e.trigger, this.content = e.content, this.placement = e.placement ?? "bottom", this.openDelay = e.openDelay ?? 300, this.closeDelay = e.closeDelay ?? 200, this.className = e.className, this.cardId = t("cmm-hover-card"), this.handleTriggerMouseEnter = () => {
+			this.scheduleShow();
+		}, this.handleTriggerMouseLeave = () => {
+			this.scheduleHide();
+		}, this.handleCardMouseEnter = () => {
+			this.cancelScheduledHide();
+		}, this.handleCardMouseLeave = () => {
+			this.scheduleHide();
+		}, this.trigger.setAttribute("aria-haspopup", "dialog"), this.trigger.addEventListener("mouseenter", this.handleTriggerMouseEnter), this.trigger.addEventListener("mouseleave", this.handleTriggerMouseLeave);
+	}
+	setContent(e) {
+		this.content = e, this.contentEl && this.renderContent();
+	}
+	show() {
+		this.destroyed || (this.cancelScheduledShow(), this.cancelScheduledHide(), this.createCardElement(), this.positionCard(), this.cardEl && (this.cardEl.offsetHeight, this.cardEl.classList.add("cmm-hover-card--visible")));
+	}
+	hide() {
+		if (this.cancelScheduledShow(), this.cancelScheduledHide(), this.cardEl) {
+			this.cardEl.classList.remove("cmm-hover-card--visible"), this.cardEl.removeEventListener("mouseenter", this.handleCardMouseEnter), this.cardEl.removeEventListener("mouseleave", this.handleCardMouseLeave);
+			let e = this.cardEl;
+			setTimeout(() => {
+				e.remove();
+			}, 200), this.cardEl = null, this.contentEl = null, this.arrowEl = null;
+		}
+	}
+	destroy() {
+		this.destroyed || (this.destroyed = !0, this.cancelScheduledShow(), this.cancelScheduledHide(), this.hide(), this.trigger.removeEventListener("mouseenter", this.handleTriggerMouseEnter), this.trigger.removeEventListener("mouseleave", this.handleTriggerMouseLeave), this.trigger.removeAttribute("aria-haspopup"));
+	}
+	scheduleShow() {
+		this.destroyed || (this.cancelScheduledHide(), this.cancelScheduledShow(), this.openDelay > 0 ? this.showTimeoutId = setTimeout(() => {
+			this.show();
+		}, this.openDelay) : this.show());
+	}
+	scheduleHide() {
+		this.cancelScheduledShow(), this.cancelScheduledHide(), this.closeDelay > 0 ? this.hideTimeoutId = setTimeout(() => {
+			this.hide();
+		}, this.closeDelay) : this.hide();
+	}
+	cancelScheduledShow() {
+		this.showTimeoutId !== null && (clearTimeout(this.showTimeoutId), this.showTimeoutId = null);
+	}
+	cancelScheduledHide() {
+		this.hideTimeoutId !== null && (clearTimeout(this.hideTimeoutId), this.hideTimeoutId = null);
+	}
+	createCardElement() {
+		this.cardEl && (this.cardEl.removeEventListener("mouseenter", this.handleCardMouseEnter), this.cardEl.removeEventListener("mouseleave", this.handleCardMouseLeave), this.cardEl.remove());
+		let e = document.createElement("div");
+		e.className = "cmm-hover-card", e.id = this.cardId, e.setAttribute("role", "dialog"), this.className && e.classList.add(this.className);
+		let t = document.createElement("div");
+		t.className = "cmm-hover-card__content", e.appendChild(t);
+		let n = document.createElement("div");
+		n.className = "cmm-hover-card__arrow", e.appendChild(n), document.body.appendChild(e), this.cardEl = e, this.contentEl = t, this.arrowEl = n, this.renderContent(), this.cardEl.addEventListener("mouseenter", this.handleCardMouseEnter), this.cardEl.addEventListener("mouseleave", this.handleCardMouseLeave);
+	}
+	renderContent() {
+		this.contentEl && (this.contentEl.innerHTML = "", typeof this.content == "string" ? this.contentEl.innerHTML = e.sanitize(this.content) : this.contentEl.appendChild(this.content));
+	}
+	positionCard() {
+		if (!this.cardEl || !this.arrowEl) return;
+		let e = this.trigger.getBoundingClientRect(), t = this.cardEl.getBoundingClientRect(), i = window.innerWidth, a = window.innerHeight, o = this.placement;
+		(o === "top" && e.top - t.height - r < 0 || o === "bottom" && e.bottom + t.height + r > a || o === "left" && e.left - t.width - r < 0 || o === "right" && e.right + t.width + r > i) && (o = n(o));
+		let s = 0, c = 0;
+		switch (o) {
+			case "top":
+				s = e.top - t.height - r, c = e.left + (e.width - t.width) / 2, this.arrowEl.className = "cmm-hover-card__arrow cmm-hover-card__arrow--bottom";
+				break;
+			case "bottom":
+				s = e.bottom + r, c = e.left + (e.width - t.width) / 2, this.arrowEl.className = "cmm-hover-card__arrow cmm-hover-card__arrow--top";
+				break;
+			case "left":
+				s = e.top + (e.height - t.height) / 2, c = e.left - t.width - r, this.arrowEl.className = "cmm-hover-card__arrow cmm-hover-card__arrow--right";
+				break;
+			case "right":
+				s = e.top + (e.height - t.height) / 2, c = e.right + r, this.arrowEl.className = "cmm-hover-card__arrow cmm-hover-card__arrow--left";
+				break;
+		}
+		c = Math.max(4, Math.min(c, i - t.width - 4)), s = Math.max(4, Math.min(s, a - t.height - 4)), this.cardEl.style.left = `${String(c)}px`, this.cardEl.style.top = `${String(s)}px`;
+	}
+};
+//#endregion
+export { i as HoverCard };
+
+//# sourceMappingURL=index.js.map

package/dist/display/hover-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/display/hover-card/index.ts"],"sourcesContent":["/**\n * HoverCard - Rich content popup on hover\n * @countermeasure/web-components/display/hover-card\n */\n\nimport { uniqueId } from '../../primitives/utils'\nimport DOMPurify from 'dompurify'\nimport { type HoverCardConfig, type HoverCardPlacement } from './types'\n\nexport type { HoverCardConfig, HoverCardPlacement } from './types'\n\n/** Determine the opposite placement for auto-flip */\nfunction getOppositePlacement(placement: HoverCardPlacement): HoverCardPlacement {\n  switch (placement) {\n    case 'top': {\n      return 'bottom'\n    }\n    case 'bottom': {\n      return 'top'\n    }\n    case 'left': {\n      return 'right'\n    }\n    case 'right': {\n      return 'left'\n    }\n  }\n}\n\n/** Gap in pixels between trigger and hover card */\nconst CARD_GAP = 8\n\nexport class HoverCard {\n  private readonly trigger: HTMLElement\n  private readonly placement: HoverCardPlacement\n  private readonly openDelay: number\n  private readonly closeDelay: number\n  private readonly className: string | undefined\n  private readonly cardId: string\n\n  private cardEl: HTMLElement | null = null\n  private contentEl: HTMLElement | null = null\n  private arrowEl: HTMLElement | null = null\n  private content: HTMLElement | string\n  private showTimeoutId: ReturnType<typeof setTimeout> | null = null\n  private hideTimeoutId: ReturnType<typeof setTimeout> | null = null\n  private destroyed = false\n\n  /** Bound event handlers for cleanup */\n  private readonly handleTriggerMouseEnter: () => void\n  private readonly handleTriggerMouseLeave: () => void\n  private readonly handleCardMouseEnter: () => void\n  private readonly handleCardMouseLeave: () => void\n\n  constructor(config: HoverCardConfig) {\n    this.trigger = config.trigger\n    this.content = config.content\n    this.placement = config.placement ?? 'bottom'\n    this.openDelay = config.openDelay ?? 300\n    this.closeDelay = config.closeDelay ?? 200\n    this.className = config.className\n    this.cardId = uniqueId('cmm-hover-card')\n\n    this.handleTriggerMouseEnter = () => {\n      this.scheduleShow()\n    }\n    this.handleTriggerMouseLeave = () => {\n      this.scheduleHide()\n    }\n    this.handleCardMouseEnter = () => {\n      this.cancelScheduledHide()\n    }\n    this.handleCardMouseLeave = () => {\n      this.scheduleHide()\n    }\n\n    this.trigger.setAttribute('aria-haspopup', 'dialog')\n    this.trigger.addEventListener('mouseenter', this.handleTriggerMouseEnter)\n    this.trigger.addEventListener('mouseleave', this.handleTriggerMouseLeave)\n  }\n\n  /** Update the hover card content */\n  setContent(content: HTMLElement | string): void {\n    this.content = content\n    if (this.contentEl) {\n      this.renderContent()\n    }\n  }\n\n  /** Programmatically show the hover card */\n  show(): void {\n    if (this.destroyed) {\n      return\n    }\n\n    this.cancelScheduledShow()\n    this.cancelScheduledHide()\n    this.createCardElement()\n    this.positionCard()\n\n    if (this.cardEl) {\n      // Force reflow before adding visible class for transition\n      void this.cardEl.offsetHeight\n      this.cardEl.classList.add('cmm-hover-card--visible')\n    }\n  }\n\n  /** Programmatically hide the hover card */\n  hide(): void {\n    this.cancelScheduledShow()\n    this.cancelScheduledHide()\n\n    if (this.cardEl) {\n      this.cardEl.classList.remove('cmm-hover-card--visible')\n      this.cardEl.removeEventListener('mouseenter', this.handleCardMouseEnter)\n      this.cardEl.removeEventListener('mouseleave', this.handleCardMouseLeave)\n\n      const el = this.cardEl\n      // Remove after transition\n      setTimeout(() => {\n        el.remove()\n      }, 200)\n\n      this.cardEl = null\n      this.contentEl = null\n      this.arrowEl = null\n    }\n  }\n\n  /** Remove listeners from trigger and clean up hover card */\n  destroy(): void {\n    if (this.destroyed) {\n      return\n    }\n    this.destroyed = true\n\n    this.cancelScheduledShow()\n    this.cancelScheduledHide()\n    this.hide()\n\n    this.trigger.removeEventListener('mouseenter', this.handleTriggerMouseEnter)\n    this.trigger.removeEventListener('mouseleave', this.handleTriggerMouseLeave)\n    this.trigger.removeAttribute('aria-haspopup')\n  }\n\n  /** Schedule showing the hover card after the configured open delay */\n  private scheduleShow(): void {\n    if (this.destroyed) {\n      return\n    }\n\n    this.cancelScheduledHide()\n    this.cancelScheduledShow()\n\n    if (this.openDelay > 0) {\n      this.showTimeoutId = setTimeout(() => {\n        this.show()\n      }, this.openDelay)\n    } else {\n      this.show()\n    }\n  }\n\n  /** Schedule hiding the hover card after the configured close delay */\n  private scheduleHide(): void {\n    this.cancelScheduledShow()\n    this.cancelScheduledHide()\n\n    if (this.closeDelay > 0) {\n      this.hideTimeoutId = setTimeout(() => {\n        this.hide()\n      }, this.closeDelay)\n    } else {\n      this.hide()\n    }\n  }\n\n  /** Cancel any pending show timeout */\n  private cancelScheduledShow(): void {\n    if (this.showTimeoutId !== null) {\n      clearTimeout(this.showTimeoutId)\n      this.showTimeoutId = null\n    }\n  }\n\n  /** Cancel any pending hide timeout */\n  private cancelScheduledHide(): void {\n    if (this.hideTimeoutId !== null) {\n      clearTimeout(this.hideTimeoutId)\n      this.hideTimeoutId = null\n    }\n  }\n\n  /** Create the hover card DOM element and append to body */\n  private createCardElement(): void {\n    // Remove existing card if present\n    if (this.cardEl) {\n      this.cardEl.removeEventListener('mouseenter', this.handleCardMouseEnter)\n      this.cardEl.removeEventListener('mouseleave', this.handleCardMouseLeave)\n      this.cardEl.remove()\n    }\n\n    const card = document.createElement('div')\n    card.className = 'cmm-hover-card'\n    card.id = this.cardId\n    card.setAttribute('role', 'dialog')\n\n    if (this.className) {\n      card.classList.add(this.className)\n    }\n\n    // Content container\n    const contentEl = document.createElement('div')\n    contentEl.className = 'cmm-hover-card__content'\n    card.appendChild(contentEl)\n\n    // Arrow\n    const arrow = document.createElement('div')\n    arrow.className = 'cmm-hover-card__arrow'\n    card.appendChild(arrow)\n\n    document.body.appendChild(card)\n\n    this.cardEl = card\n    this.contentEl = contentEl\n    this.arrowEl = arrow\n\n    this.renderContent()\n\n    // Allow hovering over the card itself\n    this.cardEl.addEventListener('mouseenter', this.handleCardMouseEnter)\n    this.cardEl.addEventListener('mouseleave', this.handleCardMouseLeave)\n  }\n\n  /** Render the content into the content element */\n  private renderContent(): void {\n    if (!this.contentEl) {\n      return\n    }\n\n    this.contentEl.innerHTML = ''\n\n    if (typeof this.content === 'string') {\n      this.contentEl.innerHTML = DOMPurify.sanitize(this.content)\n    } else {\n      this.contentEl.appendChild(this.content)\n    }\n  }\n\n  /** Position the hover card relative to the trigger element */\n  private positionCard(): void {\n    if (!this.cardEl || !this.arrowEl) {\n      return\n    }\n\n    const triggerRect = this.trigger.getBoundingClientRect()\n    const cardRect = this.cardEl.getBoundingClientRect()\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n\n    let placement = this.placement\n\n    // Auto-flip if not enough space\n    if (placement === 'top' && triggerRect.top - cardRect.height - CARD_GAP < 0) {\n      placement = getOppositePlacement(placement)\n    } else if (\n      placement === 'bottom' &&\n      triggerRect.bottom + cardRect.height + CARD_GAP > viewportHeight\n    ) {\n      placement = getOppositePlacement(placement)\n    } else if (placement === 'left' && triggerRect.left - cardRect.width - CARD_GAP < 0) {\n      placement = getOppositePlacement(placement)\n    } else if (\n      placement === 'right' &&\n      triggerRect.right + cardRect.width + CARD_GAP > viewportWidth\n    ) {\n      placement = getOppositePlacement(placement)\n    }\n\n    let top = 0\n    let left = 0\n\n    switch (placement) {\n      case 'top': {\n        top = triggerRect.top - cardRect.height - CARD_GAP\n        left = triggerRect.left + (triggerRect.width - cardRect.width) / 2\n        this.arrowEl.className = 'cmm-hover-card__arrow cmm-hover-card__arrow--bottom'\n        break\n      }\n      case 'bottom': {\n        top = triggerRect.bottom + CARD_GAP\n        left = triggerRect.left + (triggerRect.width - cardRect.width) / 2\n        this.arrowEl.className = 'cmm-hover-card__arrow cmm-hover-card__arrow--top'\n        break\n      }\n      case 'left': {\n        top = triggerRect.top + (triggerRect.height - cardRect.height) / 2\n        left = triggerRect.left - cardRect.width - CARD_GAP\n        this.arrowEl.className = 'cmm-hover-card__arrow cmm-hover-card__arrow--right'\n        break\n      }\n      case 'right': {\n        top = triggerRect.top + (triggerRect.height - cardRect.height) / 2\n        left = triggerRect.right + CARD_GAP\n        this.arrowEl.className = 'cmm-hover-card__arrow cmm-hover-card__arrow--left'\n        break\n      }\n    }\n\n    // Clamp to viewport\n    left = Math.max(4, Math.min(left, viewportWidth - cardRect.width - 4))\n    top = Math.max(4, Math.min(top, viewportHeight - cardRect.height - 4))\n\n    this.cardEl.style.left = `${String(left)}px`\n    this.cardEl.style.top = `${String(top)}px`\n  }\n}\n"],"mappings":"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"}

package/dist/display/hover-card/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * HoverCard type definitions
+ * @countermeasure/web-components/display/hover-card
+ */
+export type HoverCardPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface HoverCardConfig {
+    trigger: HTMLElement;
+    content: HTMLElement | string;
+    placement?: HoverCardPlacement;
+    openDelay?: number;
+    closeDelay?: number;
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/display/hover-card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/display/hover-card/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAEpE,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,WAAW,CAAA;IACpB,OAAO,EAAE,WAAW,GAAG,MAAM,CAAA;IAC7B,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/display/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Display - Display component library
+ * @countermeasure/web-components/display
+ */
+export { Alert } from './alert/index';
+export type { AlertConfig, AlertVariant } from './alert/types';
+export { AspectRatio } from './aspect-ratio/index';
+export type { AspectRatioConfig } from './aspect-ratio/index';
+export { Avatar, AvatarGroup } from './avatar/index';
+export type { AvatarConfig, AvatarSize, AvatarShape, AvatarStatus, AvatarGroupConfig, } from './avatar/types';
+export { Badge, severityBadge, statusBadge } from './badge/index';
+export type { BadgeConfig, BadgeVariant, BadgeSeverity, BadgeStatus } from './badge/types';
+export { Card } from './card/index';
+export type { CardConfig } from './card/types';
+export { CodeBlock } from './code-block/index';
+export type { CodeBlockConfig } from './code-block/types';
+export { EmptyState } from './empty-state/index';
+export type { EmptyStateConfig } from './empty-state/types';
+export { HoverCard } from './hover-card/index';
+export type { HoverCardConfig, HoverCardPlacement } from './hover-card/types';
+export { MarkdownViewer } from './markdown-viewer/index';
+export type { MarkdownViewerConfig } from './markdown-viewer/types';
+export { markdownToHtml, resetCodeBlockCounter, markdownParserUtils, base64Encode, base64Decode, } from './markdown-viewer/parser';
+export type { MarkdownParserOptions } from './markdown-viewer/parser';
+export { NotificationCenter } from './notification-center/index';
+export type { NotificationCenterConfig, NotificationItem, NotificationLevel, } from './notification-center/types';
+export { Popover } from './popover/index';
+export type { PopoverConfig, PopoverPlacement } from './popover/types';
+export { Progress } from './progress/index';
+export type { ProgressConfig, ProgressVariant, ProgressSize } from './progress/types';
+export { SeverityIndicator } from './severity-indicator/index';
+export type { SeverityIndicatorConfig, SeverityLevel } from './severity-indicator/types';
+export { StatCard } from './stat-card/index';
+export type { StatCardConfig, TrendConfig, TrendDirection } from './stat-card/types';
+export { Tooltip } from './tooltip/index';
+export type { TooltipConfig, TooltipPlacement } from './tooltip/types';
+export { Typography } from './typography/index';
+export type { TypographyConfig, TypographyVariant, TypographyWeight, TypographyAlign, } from './typography/types';
+export { UptimeBar } from './uptime-bar/index';
+export type { UptimeBarConfig, UptimeSegment, UptimeSegmentStatus } from './uptime-bar/types';
+//# sourceMappingURL=index.d.ts.map

package/dist/display/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/display/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAG7D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACpD,YAAY,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,GAClB,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACjE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG1F,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAGzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAG3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAG7E,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EACnB,YAAY,EACZ,YAAY,GACb,MAAM,0BAA0B,CAAA;AACjC,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAGrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,YAAY,EACV,wBAAwB,EACxB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,6BAA6B,CAAA;AAGpC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAGtE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAGxF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGpF,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAGtE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,oBAAoB,CAAA;AAG3B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/display/index.js

@@ -0,0 +1,18 @@
+import { Alert as e } from "./alert/index.js";
+import { AspectRatio as t } from "./aspect-ratio/index.js";
+import { n, t as r } from "../avatar-Chu9WlV5.js";
+import { n as i, r as a, t as o } from "../badge-DIbZWeHZ.js";
+import { Card as s } from "./card/index.js";
+import { CodeBlock as c } from "./code-block/index.js";
+import { EmptyState as l } from "./empty-state/index.js";
+import { HoverCard as u } from "./hover-card/index.js";
+import { a as d, i as f, n as p, o as m, r as h, t as g } from "../markdown-viewer-BLoPrrpk.js";
+import { NotificationCenter as _ } from "./notification-center/index.js";
+import { Popover as v } from "./popover/index.js";
+import { Progress as y } from "./progress/index.js";
+import { SeverityIndicator as b } from "./severity-indicator/index.js";
+import { StatCard as x } from "./stat-card/index.js";
+import { Tooltip as S } from "./tooltip/index.js";
+import { Typography as C } from "./typography/index.js";
+import { UptimeBar as w } from "./uptime-bar/index.js";
+export { e as Alert, t as AspectRatio, r as Avatar, n as AvatarGroup, o as Badge, s as Card, c as CodeBlock, l as EmptyState, u as HoverCard, g as MarkdownViewer, _ as NotificationCenter, v as Popover, y as Progress, b as SeverityIndicator, x as StatCard, S as Tooltip, C as Typography, w as UptimeBar, p as base64Decode, h as base64Encode, f as markdownParserUtils, d as markdownToHtml, m as resetCodeBlockCounter, i as severityBadge, a as statusBadge };

package/dist/display/markdown-viewer/index.d.ts

@@ -0,0 +1,25 @@
+import { MarkdownViewerConfig } from './types';
+export type { MarkdownViewerConfig, MermaidTheme } from './types';
+export { markdownToHtml, resetCodeBlockCounter, markdownParserUtils, base64Encode, base64Decode, } from './parser';
+export type { MarkdownParserOptions } from './parser';
+export declare class MarkdownViewer {
+    readonly el: HTMLDivElement;
+    private readonly viewerId;
+    private readonly mermaidTheme;
+    private readonly supportMermaid;
+    private currentContent;
+    private mermaidInstances;
+    constructor(config: MarkdownViewerConfig);
+    /** Update the markdown content and re-render */
+    setContent(content: string): void;
+    /**
+     * Find all mermaid placeholder divs and render them as diagrams.
+     * This method lazy-loads the MermaidDiagram component on first use.
+     */
+    renderMermaidDiagrams(): Promise<void>;
+    /** Destroy all mermaid diagram instances */
+    private destroyMermaidInstances;
+    /** Remove the viewer from the DOM */
+    destroy(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/display/markdown-viewer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/display/markdown-viewer/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAKnD,YAAY,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EACnB,YAAY,EACZ,YAAY,GACb,MAAM,UAAU,CAAA;AACjB,YAAY,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAErD,qBAAa,cAAc;IACzB,SAAgB,EAAE,EAAE,cAAc,CAAA;IAElC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAQ;IACjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAc;IAC3C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAS;IACxC,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,gBAAgB,CAAuB;gBAEnC,MAAM,EAAE,oBAAoB;IA+BxC,gDAAgD;IAChD,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAcjC;;;OAGG;IACG,qBAAqB,IAAI,OAAO,CAAC,IAAI,CAAC;IA0C5C,4CAA4C;IAC5C,OAAO,CAAC,uBAAuB;IAO/B,qCAAqC;IACrC,OAAO,IAAI,IAAI;CAIhB"}

package/dist/display/markdown-viewer/index.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, t as a } from "../../markdown-viewer-BLoPrrpk.js";
+export { a as MarkdownViewer, n as base64Decode, i as base64Encode, t as markdownParserUtils, e as markdownToHtml, r as resetCodeBlockCounter };

package/dist/display/markdown-viewer/parser.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Shared GFM Markdown Parser
+ * GFM-compatible markdown-to-HTML conversion with optional Mermaid diagram support.
+ * Handles: headings, links, images, blockquotes, lists, tables,
+ * horizontal rules, strikethrough, task lists, code blocks with
+ * language labels and copy buttons.
+ */
+interface CodeBlock {
+    language: string;
+    code: string;
+    id: string;
+}
+export interface MarkdownParserOptions {
+    supportMermaid?: boolean;
+}
+export declare function resetCodeBlockCounter(): void;
+/**
+ * Convert markdown text to HTML.
+ * The input is assumed to already be HTML-escaped for XSS safety.
+ * Code blocks, headings, links, etc. are converted to appropriate HTML.
+ */
+export declare function markdownToHtml(escapedText: string, options?: MarkdownParserOptions): string;
+declare function renderCodeBlock(block: CodeBlock): string;
+declare function transformHeadings(text: string): string;
+declare function transformHorizontalRules(text: string): string;
+declare function transformBlockquotes(text: string): string;
+declare function transformTables(text: string): string;
+declare function transformLists(text: string): string;
+declare function transformStrikethrough(text: string): string;
+declare function transformBold(text: string): string;
+declare function transformItalic(text: string): string;
+declare function transformInlineCode(text: string): string;
+declare function transformLinks(text: string): string;
+declare function transformImages(text: string): string;
+declare function transformTaskLists(text: string): string;
+declare function decodeHtmlEntities(text: string): string;
+declare function escapeForCodeBlock(text: string): string;
+/** Base64 encode with proper Unicode handling */
+export declare function base64Encode(str: string): string;
+/** Base64 decode with proper Unicode handling */
+export declare function base64Decode(str: string): string;
+export declare const markdownParserUtils: {
+    transformHeadings: typeof transformHeadings;
+    transformHorizontalRules: typeof transformHorizontalRules;
+    transformBlockquotes: typeof transformBlockquotes;
+    transformTables: typeof transformTables;
+    transformLists: typeof transformLists;
+    transformStrikethrough: typeof transformStrikethrough;
+    transformBold: typeof transformBold;
+    transformItalic: typeof transformItalic;
+    transformInlineCode: typeof transformInlineCode;
+    transformLinks: typeof transformLinks;
+    transformImages: typeof transformImages;
+    transformTaskLists: typeof transformTaskLists;
+    renderCodeBlock: typeof renderCodeBlock;
+    decodeHtmlEntities: typeof decodeHtmlEntities;
+    escapeForCodeBlock: typeof escapeForCodeBlock;
+};
+export {};
+//# sourceMappingURL=parser.d.ts.map

package/dist/display/markdown-viewer/parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../../../src/display/markdown-viewer/parser.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX;AAED,MAAM,WAAW,qBAAqB;IACpC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAMD,wBAAgB,qBAAqB,IAAI,IAAI,CAE5C;AAID;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CA8B3F;AAwDD,iBAAS,eAAe,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAmBjD;AAID,iBAAS,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAS/C;AAED,iBAAS,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED,iBAAS,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA4BlD;AAED,iBAAS,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA6B7C;AAsCD,iBAAS,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA+C5C;AAID,iBAAS,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEpD;AAED,iBAAS,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3C;AAED,iBAAS,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,iBAAS,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD;AAID,iBAAS,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAY5C;AAED,iBAAS,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ7C;AAED,iBAAS,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQhD;AAID,iBAAS,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOhD;AAED,iBAAS,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEhD;AAYD,iDAAiD;AACjD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOhD;AAED,iDAAiD;AACjD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOhD;AAID,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;CAgB/B,CAAA"}

package/dist/display/markdown-viewer/types.d.ts

@@ -0,0 +1,12 @@
+import { MermaidTheme } from '../../visualization/mermaid-diagram/types';
+export interface MarkdownViewerConfig {
+    container?: HTMLElement | string;
+    content: string;
+    className?: string;
+    /** Enable mermaid diagram rendering (default: false) */
+    renderMermaid?: boolean;
+    /** Theme for mermaid diagrams (default: 'auto') */
+    mermaidTheme?: MermaidTheme;
+}
+export type { MermaidTheme };
+//# sourceMappingURL=types.d.ts.map

package/dist/display/markdown-viewer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/display/markdown-viewer/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAA;AAE7E,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAChC,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mDAAmD;IACnD,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B;AAED,YAAY,EAAE,YAAY,EAAE,CAAA"}

package/dist/display/notification-center/index.d.ts

@@ -0,0 +1,43 @@
+import { NotificationCenterConfig, NotificationItem } from './types';
+export type { NotificationCenterConfig, NotificationItem, NotificationLevel } from './types';
+export declare class NotificationCenter {
+    readonly el: HTMLDivElement;
+    private readonly centerId;
+    private readonly notifications;
+    private readonly maxVisible;
+    private readonly emptyMessage;
+    private readonly onMarkRead;
+    private readonly onMarkAllRead;
+    private readonly onDismiss;
+    private readonly onClearAll;
+    private listEl;
+    private badgeEl;
+    private emptyEl;
+    private markAllReadBtn;
+    private clearAllBtn;
+    private readonly itemHandlersMap;
+    private readonly markAllReadHandler;
+    private readonly clearAllHandler;
+    constructor(config: NotificationCenterConfig);
+    /** Add a notification to the top of the list */
+    addNotification(item: NotificationItem): void;
+    /** Remove a notification by id */
+    removeNotification(id: string): void;
+    /** Mark a single notification as read */
+    markAsRead(id: string): void;
+    /** Mark all notifications as read */
+    markAllAsRead(): void;
+    /** Remove all notifications */
+    clearAll(): void;
+    /** Get the count of unread notifications */
+    getUnreadCount(): number;
+    /** Remove the element from the DOM and clean up all event listeners */
+    destroy(): void;
+    private render;
+    private createItemEl;
+    private removeItemEl;
+    private cleanupAllItems;
+    private updateBadge;
+    private buildClassName;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/display/notification-center/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/display/notification-center/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,EAEtB,MAAM,SAAS,CAAA;AAGhB,YAAY,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AA8C5F,qBAAa,kBAAkB;IAC7B,SAAgB,EAAE,EAAE,cAAc,CAAA;IAElC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAQ;IACjC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IACnC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAQ;IACrC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoC;IAC/D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0B;IACxD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA0B;IAErD,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,WAAW,CAAmB;IAEtC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAkC;IAClE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAY;IAC/C,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAY;gBAEhC,MAAM,EAAE,wBAAwB;IAqF5C,gDAAgD;IAChD,eAAe,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAc7C,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAapC,yCAAyC;IACzC,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAkB5B,qCAAqC;IACrC,aAAa,IAAI,IAAI;IAgBrB,+BAA+B;IAC/B,QAAQ,IAAI,IAAI;IAUhB,4CAA4C;IAC5C,cAAc,IAAI,MAAM;IAUxB,uEAAuE;IACvE,OAAO,IAAI,IAAI;IAOf,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,YAAY;IA6FpB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,cAAc;CAOvB"}

package/dist/display/notification-center/index.js

@@ -0,0 +1,145 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/display/notification-center/index.ts
+var n = {
+	info: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></svg>",
+	success: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/></svg>",
+	warning: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></svg>",
+	error: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></svg>"
+};
+function r(e) {
+	let t = Date.now() - e.getTime(), n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), a = Math.floor(i / 24);
+	return n < 60 ? "Just now" : r < 60 ? `${String(r)}m ago` : i < 24 ? `${String(i)}h ago` : a < 7 ? `${String(a)}d ago` : e.toLocaleDateString();
+}
+var i = class {
+	el;
+	centerId;
+	notifications;
+	maxVisible;
+	emptyMessage;
+	onMarkRead;
+	onMarkAllRead;
+	onDismiss;
+	onClearAll;
+	listEl;
+	badgeEl;
+	emptyEl;
+	markAllReadBtn;
+	clearAllBtn;
+	itemHandlersMap = /* @__PURE__ */ new Map();
+	markAllReadHandler;
+	clearAllHandler;
+	constructor(n) {
+		this.centerId = e("cmm-notification-center"), this.notifications = n.notifications ? [...n.notifications] : [], this.maxVisible = n.maxVisible ?? 50, this.emptyMessage = n.emptyMessage ?? "No notifications", this.onMarkRead = n.onMarkRead, this.onMarkAllRead = n.onMarkAllRead, this.onDismiss = n.onDismiss, this.onClearAll = n.onClearAll, this.el = document.createElement("div"), this.el.id = this.centerId, this.el.className = this.buildClassName(n.className), this.el.setAttribute("role", "region"), this.el.setAttribute("aria-label", "Notification center");
+		let r = document.createElement("div");
+		r.className = "cmm-notification-center__header";
+		let i = document.createElement("div");
+		i.className = "cmm-notification-center__header-left";
+		let a = document.createElement("span");
+		a.className = "cmm-notification-center__title", a.textContent = "Notifications", i.appendChild(a), this.badgeEl = document.createElement("span"), this.badgeEl.className = "cmm-notification-center__badge", this.badgeEl.setAttribute("aria-label", "Unread count"), i.appendChild(this.badgeEl), r.appendChild(i);
+		let o = document.createElement("div");
+		o.className = "cmm-notification-center__actions", this.markAllReadBtn = document.createElement("button"), this.markAllReadBtn.className = "cmm-notification-center__action-btn", this.markAllReadBtn.type = "button", this.markAllReadBtn.textContent = "Mark all read", this.markAllReadHandler = () => {
+			this.markAllAsRead();
+		}, this.markAllReadBtn.addEventListener("click", this.markAllReadHandler), o.appendChild(this.markAllReadBtn), this.clearAllBtn = document.createElement("button"), this.clearAllBtn.className = "cmm-notification-center__action-btn", this.clearAllBtn.type = "button", this.clearAllBtn.textContent = "Clear all", this.clearAllHandler = () => {
+			this.clearAll();
+		}, this.clearAllBtn.addEventListener("click", this.clearAllHandler), o.appendChild(this.clearAllBtn), r.appendChild(o), this.el.appendChild(r), this.listEl = document.createElement("div"), this.listEl.className = "cmm-notification-center__list", this.listEl.setAttribute("role", "list"), this.el.appendChild(this.listEl), this.emptyEl = document.createElement("div"), this.emptyEl.className = "cmm-notification-center__empty", this.emptyEl.textContent = this.emptyMessage, this.render(), n.container !== void 0 && t(n.container).appendChild(this.el);
+	}
+	addNotification(e) {
+		for (this.notifications.unshift(e); this.notifications.length > this.maxVisible;) {
+			let e = this.notifications.pop();
+			e !== void 0 && this.removeItemEl(e.id);
+		}
+		this.render();
+	}
+	removeNotification(e) {
+		let t = this.notifications.findIndex((t) => t.id === e);
+		t !== -1 && this.notifications.splice(t, 1), this.removeItemEl(e), this.render(), this.onDismiss !== void 0 && this.onDismiss(e);
+	}
+	markAsRead(e) {
+		let t = this.notifications.find((t) => t.id === e);
+		t !== void 0 && (t.read = !0);
+		let n = this.itemHandlersMap.get(e);
+		n !== void 0 && n.el.classList.remove("cmm-notification-center__item--unread"), this.updateBadge(), this.onMarkRead !== void 0 && this.onMarkRead(e);
+	}
+	markAllAsRead() {
+		for (let e of this.notifications) e.read = !0;
+		for (let [, e] of this.itemHandlersMap) e.el.classList.remove("cmm-notification-center__item--unread");
+		this.updateBadge(), this.onMarkAllRead !== void 0 && this.onMarkAllRead();
+	}
+	clearAll() {
+		this.cleanupAllItems(), this.notifications.length = 0, this.render(), this.onClearAll !== void 0 && this.onClearAll();
+	}
+	getUnreadCount() {
+		let e = 0;
+		for (let t of this.notifications) t.read !== !0 && (e += 1);
+		return e;
+	}
+	destroy() {
+		this.markAllReadBtn.removeEventListener("click", this.markAllReadHandler), this.clearAllBtn.removeEventListener("click", this.clearAllHandler), this.cleanupAllItems(), this.el.remove();
+	}
+	render() {
+		if (this.cleanupAllItems(), this.listEl.textContent = "", this.notifications.length === 0) this.listEl.appendChild(this.emptyEl);
+		else {
+			let e = this.notifications.slice(0, this.maxVisible);
+			for (let t of e) {
+				let e = this.createItemEl(t);
+				this.listEl.appendChild(e);
+			}
+		}
+		this.updateBadge();
+	}
+	createItemEl(e) {
+		let t = document.createElement("div");
+		t.className = "cmm-notification-center__item", t.setAttribute("role", "listitem"), t.dataset.notificationId = e.id, e.read !== !0 && t.classList.add("cmm-notification-center__item--unread");
+		let i = {
+			el: t,
+			dismissHandler: null,
+			actionHandler: null,
+			dismissBtn: null,
+			actionBtn: null
+		}, a = e.level ?? "info", o = document.createElement("div");
+		o.className = `cmm-notification-center__item-icon cmm-notification-center__item-icon--${a}`, o.setAttribute("aria-hidden", "true"), o.innerHTML = e.icon ?? n[a], t.appendChild(o);
+		let s = document.createElement("div");
+		s.className = "cmm-notification-center__item-content";
+		let c = document.createElement("div");
+		if (c.className = "cmm-notification-center__item-title", c.textContent = e.title, s.appendChild(c), e.description !== void 0) {
+			let t = document.createElement("div");
+			t.className = "cmm-notification-center__item-desc", t.textContent = e.description, t.title = e.description, s.appendChild(t);
+		}
+		let l = document.createElement("div");
+		l.className = "cmm-notification-center__item-time", l.textContent = r(e.timestamp), s.appendChild(l), t.appendChild(s);
+		let u = document.createElement("div");
+		if (u.className = "cmm-notification-center__item-actions", e.action !== void 0) {
+			let t = document.createElement("button");
+			t.className = "cmm-notification-center__item-action-btn", t.type = "button", t.textContent = e.action.label;
+			let n = e.action.onClick, r = e.id, a = () => {
+				n(r);
+			};
+			t.addEventListener("click", a), i.actionBtn = t, i.actionHandler = a, u.appendChild(t);
+		}
+		let d = document.createElement("button");
+		d.className = "cmm-notification-center__item-dismiss", d.type = "button", d.setAttribute("aria-label", "Dismiss notification"), d.textContent = "×";
+		let f = e.id, p = () => {
+			this.removeNotification(f);
+		};
+		return d.addEventListener("click", p), i.dismissBtn = d, i.dismissHandler = p, u.appendChild(d), t.appendChild(u), this.itemHandlersMap.set(e.id, i), t;
+	}
+	removeItemEl(e) {
+		let t = this.itemHandlersMap.get(e);
+		t !== void 0 && (t.dismissBtn !== null && t.dismissHandler !== null && t.dismissBtn.removeEventListener("click", t.dismissHandler), t.actionBtn !== null && t.actionHandler !== null && t.actionBtn.removeEventListener("click", t.actionHandler), t.el.remove(), this.itemHandlersMap.delete(e));
+	}
+	cleanupAllItems() {
+		for (let [e, t] of this.itemHandlersMap) t.dismissBtn !== null && t.dismissHandler !== null && t.dismissBtn.removeEventListener("click", t.dismissHandler), t.actionBtn !== null && t.actionHandler !== null && t.actionBtn.removeEventListener("click", t.actionHandler), this.itemHandlersMap.delete(e);
+	}
+	updateBadge() {
+		let e = this.getUnreadCount();
+		e > 0 ? (this.badgeEl.textContent = String(e), this.badgeEl.style.display = "", this.badgeEl.setAttribute("aria-label", `${String(e)} unread`)) : (this.badgeEl.textContent = "0", this.badgeEl.style.display = "none");
+	}
+	buildClassName(e) {
+		let t = ["cmm-notification-center"];
+		return e && t.push(e), t.join(" ");
+	}
+};
+//#endregion
+export { i as NotificationCenter };
+
+//# sourceMappingURL=index.js.map

package/dist/display/notification-center/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/display/notification-center/index.ts"],"sourcesContent":["/**\n * NotificationCenter - Notification list panel with unread count and actions\n * @countermeasure/web-components/display/notification-center\n */\n\nimport {\n  type NotificationCenterConfig,\n  type NotificationItem,\n  type NotificationLevel,\n} from './types'\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\n\nexport type { NotificationCenterConfig, NotificationItem, NotificationLevel } from './types'\n\n/** Default SVG icons per notification level */\nconst LEVEL_ICONS: Record<NotificationLevel, string> = {\n  info: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></svg>',\n  success:\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/></svg>',\n  warning:\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></svg>',\n  error:\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></svg>',\n}\n\n/** Format a Date as a relative time string */\nfunction formatRelativeTime(date: Date): string {\n  const now = Date.now()\n  const diff = now - date.getTime()\n  const seconds = Math.floor(diff / 1000)\n  const minutes = Math.floor(seconds / 60)\n  const hours = Math.floor(minutes / 60)\n  const days = Math.floor(hours / 24)\n\n  if (seconds < 60) {\n    return 'Just now'\n  }\n  if (minutes < 60) {\n    return `${String(minutes)}m ago`\n  }\n  if (hours < 24) {\n    return `${String(hours)}h ago`\n  }\n  if (days < 7) {\n    return `${String(days)}d ago`\n  }\n  return date.toLocaleDateString()\n}\n\n/** Tracked state for each rendered notification item */\ninterface ItemHandlers {\n  el: HTMLDivElement\n  dismissHandler: (() => void) | null\n  actionHandler: (() => void) | null\n  dismissBtn: HTMLButtonElement | null\n  actionBtn: HTMLButtonElement | null\n}\n\nexport class NotificationCenter {\n  public readonly el: HTMLDivElement\n\n  private readonly centerId: string\n  private readonly notifications: NotificationItem[]\n  private readonly maxVisible: number\n  private readonly emptyMessage: string\n  private readonly onMarkRead: ((id: string) => void) | undefined\n  private readonly onMarkAllRead: (() => void) | undefined\n  private readonly onDismiss: ((id: string) => void) | undefined\n  private readonly onClearAll: (() => void) | undefined\n\n  private listEl: HTMLDivElement\n  private badgeEl: HTMLSpanElement\n  private emptyEl: HTMLDivElement\n  private markAllReadBtn: HTMLButtonElement\n  private clearAllBtn: HTMLButtonElement\n\n  private readonly itemHandlersMap = new Map<string, ItemHandlers>()\n  private readonly markAllReadHandler: () => void\n  private readonly clearAllHandler: () => void\n\n  constructor(config: NotificationCenterConfig) {\n    this.centerId = uniqueId('cmm-notification-center')\n    this.notifications = config.notifications ? [...config.notifications] : []\n    this.maxVisible = config.maxVisible ?? 50\n    this.emptyMessage = config.emptyMessage ?? 'No notifications'\n    this.onMarkRead = config.onMarkRead\n    this.onMarkAllRead = config.onMarkAllRead\n    this.onDismiss = config.onDismiss\n    this.onClearAll = config.onClearAll\n\n    // Create root element\n    this.el = document.createElement('div')\n    this.el.id = this.centerId\n    this.el.className = this.buildClassName(config.className)\n    this.el.setAttribute('role', 'region')\n    this.el.setAttribute('aria-label', 'Notification center')\n\n    // Build header\n    const headerEl = document.createElement('div')\n    headerEl.className = 'cmm-notification-center__header'\n\n    const headerLeft = document.createElement('div')\n    headerLeft.className = 'cmm-notification-center__header-left'\n\n    const titleEl = document.createElement('span')\n    titleEl.className = 'cmm-notification-center__title'\n    titleEl.textContent = 'Notifications'\n    headerLeft.appendChild(titleEl)\n\n    this.badgeEl = document.createElement('span')\n    this.badgeEl.className = 'cmm-notification-center__badge'\n    this.badgeEl.setAttribute('aria-label', 'Unread count')\n    headerLeft.appendChild(this.badgeEl)\n\n    headerEl.appendChild(headerLeft)\n\n    const actionsEl = document.createElement('div')\n    actionsEl.className = 'cmm-notification-center__actions'\n\n    this.markAllReadBtn = document.createElement('button')\n    this.markAllReadBtn.className = 'cmm-notification-center__action-btn'\n    this.markAllReadBtn.type = 'button'\n    this.markAllReadBtn.textContent = 'Mark all read'\n\n    this.markAllReadHandler = () => {\n      this.markAllAsRead()\n    }\n    this.markAllReadBtn.addEventListener('click', this.markAllReadHandler)\n    actionsEl.appendChild(this.markAllReadBtn)\n\n    this.clearAllBtn = document.createElement('button')\n    this.clearAllBtn.className = 'cmm-notification-center__action-btn'\n    this.clearAllBtn.type = 'button'\n    this.clearAllBtn.textContent = 'Clear all'\n\n    this.clearAllHandler = () => {\n      this.clearAll()\n    }\n    this.clearAllBtn.addEventListener('click', this.clearAllHandler)\n    actionsEl.appendChild(this.clearAllBtn)\n\n    headerEl.appendChild(actionsEl)\n    this.el.appendChild(headerEl)\n\n    // Build list\n    this.listEl = document.createElement('div')\n    this.listEl.className = 'cmm-notification-center__list'\n    this.listEl.setAttribute('role', 'list')\n    this.el.appendChild(this.listEl)\n\n    // Build empty state\n    this.emptyEl = document.createElement('div')\n    this.emptyEl.className = 'cmm-notification-center__empty'\n    this.emptyEl.textContent = this.emptyMessage\n\n    // Render initial state\n    this.render()\n\n    // Mount if container provided\n    if (config.container !== undefined) {\n      const parent = resolveContainer(config.container)\n      parent.appendChild(this.el)\n    }\n  }\n\n  /** Add a notification to the top of the list */\n  addNotification(item: NotificationItem): void {\n    this.notifications.unshift(item)\n\n    // Trim to maxVisible\n    while (this.notifications.length > this.maxVisible) {\n      const removed = this.notifications.pop()\n      if (removed !== undefined) {\n        this.removeItemEl(removed.id)\n      }\n    }\n\n    this.render()\n  }\n\n  /** Remove a notification by id */\n  removeNotification(id: string): void {\n    const index = this.notifications.findIndex(n => n.id === id)\n    if (index !== -1) {\n      this.notifications.splice(index, 1)\n    }\n    this.removeItemEl(id)\n    this.render()\n\n    if (this.onDismiss !== undefined) {\n      this.onDismiss(id)\n    }\n  }\n\n  /** Mark a single notification as read */\n  markAsRead(id: string): void {\n    const notification = this.notifications.find(n => n.id === id)\n    if (notification !== undefined) {\n      notification.read = true\n    }\n\n    const handlers = this.itemHandlersMap.get(id)\n    if (handlers !== undefined) {\n      handlers.el.classList.remove('cmm-notification-center__item--unread')\n    }\n\n    this.updateBadge()\n\n    if (this.onMarkRead !== undefined) {\n      this.onMarkRead(id)\n    }\n  }\n\n  /** Mark all notifications as read */\n  markAllAsRead(): void {\n    for (const notification of this.notifications) {\n      notification.read = true\n    }\n\n    for (const [, handlers] of this.itemHandlersMap) {\n      handlers.el.classList.remove('cmm-notification-center__item--unread')\n    }\n\n    this.updateBadge()\n\n    if (this.onMarkAllRead !== undefined) {\n      this.onMarkAllRead()\n    }\n  }\n\n  /** Remove all notifications */\n  clearAll(): void {\n    this.cleanupAllItems()\n    this.notifications.length = 0\n    this.render()\n\n    if (this.onClearAll !== undefined) {\n      this.onClearAll()\n    }\n  }\n\n  /** Get the count of unread notifications */\n  getUnreadCount(): number {\n    let count = 0\n    for (const notification of this.notifications) {\n      if (notification.read !== true) {\n        count += 1\n      }\n    }\n    return count\n  }\n\n  /** Remove the element from the DOM and clean up all event listeners */\n  destroy(): void {\n    this.markAllReadBtn.removeEventListener('click', this.markAllReadHandler)\n    this.clearAllBtn.removeEventListener('click', this.clearAllHandler)\n    this.cleanupAllItems()\n    this.el.remove()\n  }\n\n  private render(): void {\n    this.cleanupAllItems()\n    this.listEl.textContent = ''\n\n    if (this.notifications.length === 0) {\n      this.listEl.appendChild(this.emptyEl)\n    } else {\n      const visibleItems = this.notifications.slice(0, this.maxVisible)\n      for (const item of visibleItems) {\n        const itemEl = this.createItemEl(item)\n        this.listEl.appendChild(itemEl)\n      }\n    }\n\n    this.updateBadge()\n  }\n\n  private createItemEl(item: NotificationItem): HTMLDivElement {\n    const itemEl = document.createElement('div')\n    itemEl.className = 'cmm-notification-center__item'\n    itemEl.setAttribute('role', 'listitem')\n    itemEl.dataset.notificationId = item.id\n\n    if (item.read !== true) {\n      itemEl.classList.add('cmm-notification-center__item--unread')\n    }\n\n    const tracked: ItemHandlers = {\n      el: itemEl,\n      dismissHandler: null,\n      actionHandler: null,\n      dismissBtn: null,\n      actionBtn: null,\n    }\n\n    // Icon area\n    const level = item.level ?? 'info'\n    const iconEl = document.createElement('div')\n    iconEl.className = `cmm-notification-center__item-icon cmm-notification-center__item-icon--${level}`\n    iconEl.setAttribute('aria-hidden', 'true')\n    iconEl.innerHTML = item.icon ?? LEVEL_ICONS[level]\n    itemEl.appendChild(iconEl)\n\n    // Content area\n    const contentEl = document.createElement('div')\n    contentEl.className = 'cmm-notification-center__item-content'\n\n    const titleEl = document.createElement('div')\n    titleEl.className = 'cmm-notification-center__item-title'\n    titleEl.textContent = item.title\n    contentEl.appendChild(titleEl)\n\n    if (item.description !== undefined) {\n      const descEl = document.createElement('div')\n      descEl.className = 'cmm-notification-center__item-desc'\n      descEl.textContent = item.description\n      descEl.title = item.description\n      contentEl.appendChild(descEl)\n    }\n\n    const timeEl = document.createElement('div')\n    timeEl.className = 'cmm-notification-center__item-time'\n    timeEl.textContent = formatRelativeTime(item.timestamp)\n    contentEl.appendChild(timeEl)\n\n    itemEl.appendChild(contentEl)\n\n    // Actions area\n    const actionsEl = document.createElement('div')\n    actionsEl.className = 'cmm-notification-center__item-actions'\n\n    if (item.action !== undefined) {\n      const actionBtn = document.createElement('button')\n      actionBtn.className = 'cmm-notification-center__item-action-btn'\n      actionBtn.type = 'button'\n      actionBtn.textContent = item.action.label\n\n      const actionOnClick = item.action.onClick\n      const actionId = item.id\n      const actionHandler = () => {\n        actionOnClick(actionId)\n      }\n      actionBtn.addEventListener('click', actionHandler)\n      tracked.actionBtn = actionBtn\n      tracked.actionHandler = actionHandler\n      actionsEl.appendChild(actionBtn)\n    }\n\n    const dismissBtn = document.createElement('button')\n    dismissBtn.className = 'cmm-notification-center__item-dismiss'\n    dismissBtn.type = 'button'\n    dismissBtn.setAttribute('aria-label', 'Dismiss notification')\n    dismissBtn.textContent = '\\u00d7'\n\n    const dismissId = item.id\n    const dismissHandler = () => {\n      this.removeNotification(dismissId)\n    }\n    dismissBtn.addEventListener('click', dismissHandler)\n    tracked.dismissBtn = dismissBtn\n    tracked.dismissHandler = dismissHandler\n    actionsEl.appendChild(dismissBtn)\n\n    itemEl.appendChild(actionsEl)\n\n    this.itemHandlersMap.set(item.id, tracked)\n\n    return itemEl\n  }\n\n  private removeItemEl(id: string): void {\n    const handlers = this.itemHandlersMap.get(id)\n    if (handlers !== undefined) {\n      if (handlers.dismissBtn !== null && handlers.dismissHandler !== null) {\n        handlers.dismissBtn.removeEventListener('click', handlers.dismissHandler)\n      }\n      if (handlers.actionBtn !== null && handlers.actionHandler !== null) {\n        handlers.actionBtn.removeEventListener('click', handlers.actionHandler)\n      }\n      handlers.el.remove()\n      this.itemHandlersMap.delete(id)\n    }\n  }\n\n  private cleanupAllItems(): void {\n    for (const [id, handlers] of this.itemHandlersMap) {\n      if (handlers.dismissBtn !== null && handlers.dismissHandler !== null) {\n        handlers.dismissBtn.removeEventListener('click', handlers.dismissHandler)\n      }\n      if (handlers.actionBtn !== null && handlers.actionHandler !== null) {\n        handlers.actionBtn.removeEventListener('click', handlers.actionHandler)\n      }\n      this.itemHandlersMap.delete(id)\n    }\n  }\n\n  private updateBadge(): void {\n    const count = this.getUnreadCount()\n    if (count > 0) {\n      this.badgeEl.textContent = String(count)\n      this.badgeEl.style.display = ''\n      this.badgeEl.setAttribute('aria-label', `${String(count)} unread`)\n    } else {\n      this.badgeEl.textContent = '0'\n      this.badgeEl.style.display = 'none'\n    }\n  }\n\n  private buildClassName(extra?: string): string {\n    const classes = ['cmm-notification-center']\n    if (extra) {\n      classes.push(extra)\n    }\n    return classes.join(' ')\n  }\n}\n"],"mappings":"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"}