@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/widgets/MessageStream.js

@@ -1,455 +1,525 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { classNames } from "../../utils/index.js";
 import { Icon } from "../display/Icon.js";
+import { classNames } from "../../utils/index.js";
 import { useCompactMode } from "../../hooks/useCompactMode.js";
-const STATUS_SHAPES = {
-  off: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
-  standby: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: "none", stroke: color, strokeWidth: "2" }) }),
-  normal: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
-  caution: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) }),
-  serious: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) }),
-  critical: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) })
+import { memo, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/MessageStream.tsx
+/**
+* @zendir/ui - MessageStream Component
+*
+* Stream/notification window for displaying messages, events, or status updates.
+* Each message card has integrated status system with dual-coding (color + shape).
+*
+* AstroUXDS Compliance:
+* - Status colors per AstroUXDS status system
+* - Dual-coding (color + shape) for accessibility
+* - Clear visual hierarchy
+* - Proper contrast ratios
+*
+* @example
+* ```tsx
+* import { MessageStream } from '@zendir/ui';
+*
+* <MessageStream
+*   title="Response Status"
+*   messages={[
+*     { id: '1', text: 'Message Received', status: 'standby' },
+*     { id: '2', text: 'Confirmation Receipt', status: 'normal' },
+*     { id: '3', text: 'Failed', status: 'critical' },
+*   ]}
+* />
+* ```
+*/
+var STATUS_SHAPES = {
+	off: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "6",
+			r: "5",
+			fill: color
+		})
+	}),
+	standby: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "6",
+			r: "5",
+			fill: "none",
+			stroke: color,
+			strokeWidth: "2"
+		})
+	}),
+	normal: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "6",
+			r: "5",
+			fill: color
+		})
+	}),
+	caution: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("rect", {
+			x: "1",
+			y: "1",
+			width: "10",
+			height: "10",
+			fill: color
+		})
+	}),
+	serious: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polygon", {
+			points: "6,1 11,6 6,11 1,6",
+			fill: color
+		})
+	}),
+	critical: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polygon", {
+			points: "6,11 1,2 11,2",
+			fill: color
+		})
+	})
 };
 function getStatusColor(status, tokens) {
-  switch (status) {
-    case "normal":
-      return tokens.colors.status.normal;
-    case "standby":
-      return tokens.colors.status.standby;
-    case "caution":
-      return tokens.colors.status.caution;
-    case "serious":
-      return tokens.colors.status.serious;
-    case "critical":
-      return tokens.colors.status.critical;
-    case "off":
-      return tokens.colors.status.off;
-    default:
-      return tokens.colors.status.standby;
-  }
+	switch (status) {
+		case "normal": return tokens.colors.status.normal;
+		case "standby": return tokens.colors.status.standby;
+		case "caution": return tokens.colors.status.caution;
+		case "serious": return tokens.colors.status.serious;
+		case "critical": return tokens.colors.status.critical;
+		case "off": return tokens.colors.status.off;
+		default: return tokens.colors.status.standby;
+	}
 }
 function formatTimestamp(timestamp, format) {
-  if (!timestamp) return "";
-  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
-  if (format === "relative") {
-    const now = /* @__PURE__ */ new Date();
-    const diff = now.getTime() - date.getTime();
-    const seconds = Math.floor(diff / 1e3);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    if (seconds < 60) return "Just now";
-    if (minutes < 60) return `${minutes}m ago`;
-    if (hours < 24) return `${hours}h ago`;
-    return date.toLocaleDateString();
-  }
-  if (format === "time-only") {
-    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-  }
-  return date.toLocaleString();
+	if (!timestamp) return "";
+	const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+	if (format === "relative") {
+		const diff = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
+		const seconds = Math.floor(diff / 1e3);
+		const minutes = Math.floor(seconds / 60);
+		const hours = Math.floor(minutes / 60);
+		if (seconds < 60) return "Just now";
+		if (minutes < 60) return `${minutes}m ago`;
+		if (hours < 24) return `${hours}h ago`;
+		return date.toLocaleDateString();
+	}
+	if (format === "time-only") return date.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+	return date.toLocaleString();
 }
-const MessageCard = memo(function MessageCard2({
-  message,
-  tokens,
-  size,
-  showTimestamp,
-  timeFormat,
-  onClick,
-  variant
-}) {
-  const status = message.status || "standby";
-  const statusColor = getStatusColor(status, tokens);
-  const sizeConfig = {
-    sm: { padding: 8, fontSize: "0.75rem", fontSizeSmall: "0.625rem", iconSize: 10, gap: 6 },
-    // 12px / 10px in rem
-    md: { padding: 12, fontSize: "0.875rem", fontSizeSmall: "0.75rem", iconSize: 12, gap: 8 },
-    // 14px / 12px in rem
-    lg: { padding: 16, fontSize: "1rem", fontSizeSmall: "0.875rem", iconSize: 14, gap: 10 }
-    // 16px / 14px in rem
-  }[size];
-  const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "listitem",
-      "aria-label": `${message.text} - ${status}`,
-      onClick: () => onClick == null ? void 0 : onClick(message),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: sizeConfig.gap,
-        padding: isCompact ? `${sizeConfig.padding / 2}px ${sizeConfig.padding}px` : sizeConfig.padding,
-        backgroundColor: tokens.colors.background.elevated,
-        border: `1.5px solid ${statusColor}`,
-        borderRadius: tokens.borderRadius.md,
-        cursor: onClick ? "pointer" : "default",
-        transition: "all 0.15s ease",
-        ...message.active && {
-          boxShadow: `0 0 0 2px ${statusColor}40`
-        }
-      },
-      onMouseEnter: (e) => {
-        if (onClick) {
-          e.currentTarget.style.backgroundColor = tokens.colors.background.surface;
-          e.currentTarget.style.transform = "translateY(-1px)";
-        }
-      },
-      onMouseLeave: (e) => {
-        if (onClick) {
-          e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
-          e.currentTarget.style.transform = "translateY(0)";
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { flexShrink: 0, display: "flex", alignItems: "center" }, children: STATUS_SHAPES[status](sizeConfig.iconSize, statusColor) }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              flex: 1,
-              fontSize: sizeConfig.fontSize,
-              fontWeight: 500,
-              color: tokens.colors.text.primary,
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            },
-            children: message.text
-          }
-        ),
-        message.details && !isCompact && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: sizeConfig.fontSizeSmall,
-              color: tokens.colors.text.tertiary
-            },
-            children: message.details
-          }
-        ),
-        showTimestamp && message.timestamp && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: sizeConfig.fontSizeSmall,
-              color: tokens.colors.text.tertiary,
-              fontFamily: tokens.typography.fontFamily.mono,
-              whiteSpace: "nowrap"
-            },
-            children: formatTimestamp(message.timestamp, timeFormat)
-          }
-        )
-      ]
-    }
-  );
+var MessageCard = memo(function MessageCard({ message, tokens, size, showTimestamp, timeFormat, onClick, variant }) {
+	const status = message.status || "standby";
+	const statusColor = getStatusColor(status, tokens);
+	const sizeConfig = {
+		sm: {
+			padding: 8,
+			fontSize: "0.75rem",
+			fontSizeSmall: "0.625rem",
+			iconSize: 10,
+			gap: 6
+		},
+		md: {
+			padding: 12,
+			fontSize: "0.875rem",
+			fontSizeSmall: "0.75rem",
+			iconSize: 12,
+			gap: 8
+		},
+		lg: {
+			padding: 16,
+			fontSize: "1rem",
+			fontSizeSmall: "0.875rem",
+			iconSize: 14,
+			gap: 10
+		}
+	}[size];
+	const isCompact = variant === "compact";
+	return /* @__PURE__ */ jsxs("div", {
+		role: "listitem",
+		"aria-label": `${message.text} - ${status}`,
+		onClick: () => onClick?.(message),
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: sizeConfig.gap,
+			padding: isCompact ? `${sizeConfig.padding / 2}px ${sizeConfig.padding}px` : sizeConfig.padding,
+			backgroundColor: tokens.colors.background.elevated,
+			border: `1.5px solid ${statusColor}`,
+			borderRadius: tokens.borderRadius.md,
+			cursor: onClick ? "pointer" : "default",
+			transition: "all 0.15s ease",
+			...message.active && { boxShadow: `0 0 0 2px ${statusColor}40` }
+		},
+		onMouseEnter: (e) => {
+			if (onClick) {
+				e.currentTarget.style.backgroundColor = tokens.colors.background.surface;
+				e.currentTarget.style.transform = "translateY(-1px)";
+			}
+		},
+		onMouseLeave: (e) => {
+			if (onClick) {
+				e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
+				e.currentTarget.style.transform = "translateY(0)";
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					flexShrink: 0,
+					display: "flex",
+					alignItems: "center"
+				},
+				children: STATUS_SHAPES[status](sizeConfig.iconSize, statusColor)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					flex: 1,
+					fontSize: sizeConfig.fontSize,
+					fontWeight: 500,
+					color: tokens.colors.text.primary,
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: message.text
+			}),
+			message.details && !isCompact && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: sizeConfig.fontSizeSmall,
+					color: tokens.colors.text.tertiary
+				},
+				children: message.details
+			}),
+			showTimestamp && message.timestamp && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: sizeConfig.fontSizeSmall,
+					color: tokens.colors.text.tertiary,
+					fontFamily: tokens.typography.fontFamily.mono,
+					whiteSpace: "nowrap"
+				},
+				children: formatTimestamp(message.timestamp, timeFormat)
+			})
+		]
+	});
 });
-const TreeNode = memo(function TreeNode2({
-  message,
-  tokens,
-  size,
-  showTimestamp,
-  timeFormat,
-  onClick,
-  depth,
-  showConnectors,
-  isLast
-}) {
-  const hasChildren = message.children && message.children.length > 0;
-  const indentSize = 32;
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    showConnectors && depth > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: (depth - 1) * indentSize + 16,
-            top: 0,
-            width: 2,
-            height: isLast ? "50%" : "100%",
-            backgroundColor: tokens.colors.border.muted
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: (depth - 1) * indentSize + 16,
-            top: "50%",
-            width: indentSize - 8,
-            height: 2,
-            backgroundColor: tokens.colors.border.muted
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { marginLeft: depth * indentSize }, children: /* @__PURE__ */ jsx(
-      MessageCard,
-      {
-        message,
-        tokens,
-        size,
-        showTimestamp,
-        timeFormat,
-        onClick,
-        variant: "tree"
-      }
-    ) }),
-    hasChildren && /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: message.children.map((child, index) => /* @__PURE__ */ jsx("div", { style: { marginTop: index > 0 ? 8 : 0 }, children: /* @__PURE__ */ jsx(
-      TreeNode2,
-      {
-        message: child,
-        tokens,
-        size,
-        showTimestamp,
-        timeFormat,
-        onClick,
-        depth: depth + 1,
-        showConnectors,
-        isLast: index === message.children.length - 1
-      }
-    ) }, child.id)) })
-  ] });
+var TreeNode = memo(function TreeNode({ message, tokens, size, showTimestamp, timeFormat, onClick, depth, showConnectors, isLast }) {
+	const hasChildren = message.children && message.children.length > 0;
+	const indentSize = 32;
+	return /* @__PURE__ */ jsxs("div", {
+		style: { position: "relative" },
+		children: [
+			showConnectors && depth > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				left: (depth - 1) * indentSize + 16,
+				top: 0,
+				width: 2,
+				height: isLast ? "50%" : "100%",
+				backgroundColor: tokens.colors.border.muted
+			} }), /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				left: (depth - 1) * indentSize + 16,
+				top: "50%",
+				width: indentSize - 8,
+				height: 2,
+				backgroundColor: tokens.colors.border.muted
+			} })] }),
+			/* @__PURE__ */ jsx("div", {
+				style: { marginLeft: depth * indentSize },
+				children: /* @__PURE__ */ jsx(MessageCard, {
+					message,
+					tokens,
+					size,
+					showTimestamp,
+					timeFormat,
+					onClick,
+					variant: "tree"
+				})
+			}),
+			hasChildren && /* @__PURE__ */ jsx("div", {
+				style: { marginTop: 8 },
+				children: message.children.map((child, index) => /* @__PURE__ */ jsx("div", {
+					style: { marginTop: index > 0 ? 8 : 0 },
+					children: /* @__PURE__ */ jsx(TreeNode, {
+						message: child,
+						tokens,
+						size,
+						showTimestamp,
+						timeFormat,
+						onClick,
+						depth: depth + 1,
+						showConnectors,
+						isLast: index === message.children.length - 1
+					})
+				}, child.id))
+			})
+		]
+	});
 });
-const MessageStream = memo(function MessageStream2({
-  title,
-  subtitle,
-  messages,
-  maxHeight,
-  showTimestamps = false,
-  timeFormat = "relative",
-  variant = "list",
-  className = "",
-  size = "md",
-  onMessageClick,
-  loading = false,
-  emptyMessage = "No messages",
-  showConnectors = true,
-  collapsible = false,
-  defaultExpanded = false,
-  onPinChange
-}) {
-  const { tokens, theme, prefersReducedMotion } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({
-    compact: collapsible,
-    defaultExpanded,
-    onPinChange
-  });
-  const containerStyle = useMemo(() => ({
-    backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
-    ...isTransparentTheme && {
-      backdropFilter: "blur(12px)",
-      WebkitBackdropFilter: "blur(12px)"
-    },
-    ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
-    borderRadius: tokens.borderRadius.lg,
-    padding: tokens.spacing.md,
-    display: "flex",
-    flexDirection: "column"
-  }), [tokens, isTransparentTheme]);
-  const statusCounts = useMemo(() => {
-    const counts = { normal: 0, caution: 0, critical: 0, other: 0 };
-    messages.forEach((m) => {
-      if (m.status === "normal") counts.normal++;
-      else if (m.status === "caution") counts.caution++;
-      else if (m.status === "critical" || m.status === "serious") counts.critical++;
-      else counts.other++;
-    });
-    return counts;
-  }, [messages]);
-  if (loading) {
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        className: classNames("zendir-message-stream", className),
-        style: containerStyle,
-        "aria-busy": "true",
-        "aria-label": "Loading messages",
-        children: [
-          title && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsx("div", { style: {
-              height: 18,
-              width: 120,
-              backgroundColor: tokens.colors.background.elevated,
-              borderRadius: 4,
-              marginBottom: 8
-            } }),
-            subtitle && /* @__PURE__ */ jsx("div", { style: {
-              height: 14,
-              width: 200,
-              backgroundColor: tokens.colors.background.elevated,
-              borderRadius: 4
-            } })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                height: 44,
-                backgroundColor: tokens.colors.background.elevated,
-                borderRadius: tokens.borderRadius.md,
-                border: `2px solid ${tokens.colors.border.muted}`
-              }
-            },
-            i
-          )) })
-        ]
-      }
-    );
-  }
-  if (collapsible && !expanded) {
-    return /* @__PURE__ */ jsx(
-      "article",
-      {
-        className: classNames("zendir-message-stream", "collapsed", className),
-        ...handlers,
-        style: {
-          ...containerStyle,
-          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
-          cursor: "pointer",
-          transition: `all ${transitionDuration} ease-out`
-        },
-        onMouseEnter: (e) => {
-          handlers.onMouseEnter();
-          if (!prefersReducedMotion) {
-            e.currentTarget.style.transform = "scale(1.01)";
-            e.currentTarget.style.boxShadow = `0 4px 12px ${tokens.colors.accent.primary}20`;
-          }
-        },
-        onMouseLeave: (e) => {
-          handlers.onMouseLeave();
-          e.currentTarget.style.transform = "scale(1)";
-          e.currentTarget.style.boxShadow = "";
-        },
-        "aria-label": `${title || "Messages"} (collapsed)`,
-        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: tokens.spacing.md }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
-            /* @__PURE__ */ jsx(Icon, { name: "message", size: 14, color: tokens.colors.accent.primary }),
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: tokens.typography.fontWeight.medium }, children: title ? title.split(" ")[0] : "Messages" }),
-            /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.text.tertiary, fontSize: tokens.typography.fontSize.xs }, children: [
-              "(",
-              messages.length,
-              ")"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
-            statusCounts.critical > 0 && /* @__PURE__ */ jsxs("span", { style: {
-              color: tokens.colors.status.critical,
-              fontSize: tokens.typography.fontSize.xs,
-              fontWeight: tokens.typography.fontWeight.medium
-            }, children: [
-              statusCounts.critical,
-              " critical"
-            ] }),
-            statusCounts.caution > 0 && /* @__PURE__ */ jsxs("span", { style: {
-              color: tokens.colors.status.caution,
-              fontSize: tokens.typography.fontSize.xs,
-              fontWeight: tokens.typography.fontWeight.medium
-            }, children: [
-              statusCounts.caution,
-              " warn"
-            ] }),
-            isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12, color: tokens.colors.accent.primary })
-          ] })
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-message-stream", collapsible ? "expanded" : "", className),
-      ...collapsible ? handlers : {},
-      role: collapsible ? handlers.role : "log",
-      tabIndex: collapsible ? handlers.tabIndex : void 0,
-      "aria-expanded": collapsible ? handlers["aria-expanded"] : void 0,
-      style: {
-        ...containerStyle,
-        cursor: collapsible ? "pointer" : void 0,
-        transition: collapsible ? `all ${transitionDuration} ease-out` : void 0
-      },
-      "aria-label": title || "Message stream",
-      "aria-live": "polite",
-      children: [
-        (title || subtitle) && /* @__PURE__ */ jsxs("header", { style: { marginBottom: 16 }, children: [
-          title && /* @__PURE__ */ jsx("h3", { style: {
-            fontSize: tokens.typography.fontSize.lg,
-            fontWeight: 500,
-            // AstroUXDS medium for headers
-            color: tokens.colors.text.primary,
-            margin: 0
-          }, children: title }),
-          subtitle && /* @__PURE__ */ jsx("p", { style: {
-            fontSize: tokens.typography.fontSize.sm,
-            color: tokens.colors.text.tertiary,
-            margin: "4px 0 0 0"
-          }, children: subtitle })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "list",
-            tabIndex: maxHeight ? 0 : void 0,
-            "aria-label": maxHeight ? `${title || "Messages"} scrollable list` : void 0,
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: variant === "compact" ? 4 : 8,
-              ...maxHeight && {
-                maxHeight,
-                overflowY: "auto",
-                paddingRight: 8
-              }
-            },
-            children: messages.length === 0 ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  textAlign: "center",
-                  padding: 32,
-                  color: tokens.colors.text.tertiary,
-                  fontSize: tokens.typography.fontSize.sm
-                },
-                children: emptyMessage
-              }
-            ) : variant === "tree" ? messages.map((message, index) => /* @__PURE__ */ jsx(
-              TreeNode,
-              {
-                message,
-                tokens,
-                size,
-                showTimestamp: showTimestamps,
-                timeFormat,
-                onClick: onMessageClick,
-                depth: 0,
-                showConnectors,
-                isLast: index === messages.length - 1
-              },
-              message.id
-            )) : messages.map((message) => /* @__PURE__ */ jsx(
-              MessageCard,
-              {
-                message,
-                tokens,
-                size,
-                showTimestamp: showTimestamps,
-                timeFormat,
-                onClick: onMessageClick,
-                variant
-              },
-              message.id
-            ))
-          }
-        )
-      ]
-    }
-  );
+var MessageStream = memo(function MessageStream({ title, subtitle, messages, maxHeight, showTimestamps = false, timeFormat = "relative", variant = "list", className = "", size = "md", onMessageClick, loading = false, emptyMessage = "No messages", showConnectors = true, collapsible = false, defaultExpanded = false, onPinChange }) {
+	const { tokens, theme, prefersReducedMotion } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({
+		compact: collapsible,
+		defaultExpanded,
+		onPinChange
+	});
+	const containerStyle = useMemo(() => ({
+		backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+		...isTransparentTheme && {
+			backdropFilter: "blur(12px)",
+			WebkitBackdropFilter: "blur(12px)"
+		},
+		...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+		borderRadius: tokens.borderRadius.lg,
+		padding: tokens.spacing.md,
+		display: "flex",
+		flexDirection: "column"
+	}), [tokens, isTransparentTheme]);
+	const statusCounts = useMemo(() => {
+		const counts = {
+			normal: 0,
+			caution: 0,
+			critical: 0,
+			other: 0
+		};
+		messages.forEach((m) => {
+			if (m.status === "normal") counts.normal++;
+			else if (m.status === "caution") counts.caution++;
+			else if (m.status === "critical" || m.status === "serious") counts.critical++;
+			else counts.other++;
+		});
+		return counts;
+	}, [messages]);
+	if (loading) return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-message-stream", className),
+		style: containerStyle,
+		"aria-busy": "true",
+		"aria-label": "Loading messages",
+		children: [title && /* @__PURE__ */ jsxs("div", {
+			style: { marginBottom: 16 },
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				height: 18,
+				width: 120,
+				backgroundColor: tokens.colors.background.elevated,
+				borderRadius: 4,
+				marginBottom: 8
+			} }), subtitle && /* @__PURE__ */ jsx("div", { style: {
+				height: 14,
+				width: 200,
+				backgroundColor: tokens.colors.background.elevated,
+				borderRadius: 4
+			} })]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 8
+			},
+			children: [
+				1,
+				2,
+				3
+			].map((i) => /* @__PURE__ */ jsx("div", { style: {
+				height: 44,
+				backgroundColor: tokens.colors.background.elevated,
+				borderRadius: tokens.borderRadius.md,
+				border: `2px solid ${tokens.colors.border.muted}`
+			} }, i))
+		})]
+	});
+	if (collapsible && !expanded) return /* @__PURE__ */ jsx("article", {
+		className: classNames("zendir-message-stream", "collapsed", className),
+		...handlers,
+		style: {
+			...containerStyle,
+			padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+			cursor: "pointer",
+			transition: `all ${transitionDuration} ease-out`
+		},
+		onMouseEnter: (e) => {
+			handlers.onMouseEnter();
+			if (!prefersReducedMotion) {
+				e.currentTarget.style.transform = "scale(1.01)";
+				e.currentTarget.style.boxShadow = `0 4px 12px ${tokens.colors.accent.primary}20`;
+			}
+		},
+		onMouseLeave: (e) => {
+			handlers.onMouseLeave();
+			e.currentTarget.style.transform = "scale(1)";
+			e.currentTarget.style.boxShadow = "";
+		},
+		"aria-label": `${title || "Messages"} (collapsed)`,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: tokens.spacing.md
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm
+				},
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "message",
+						size: 14,
+						color: tokens.colors.accent.primary
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: { fontWeight: tokens.typography.fontWeight.medium },
+						children: title ? title.split(" ")[0] : "Messages"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						style: {
+							color: tokens.colors.text.tertiary,
+							fontSize: tokens.typography.fontSize.xs
+						},
+						children: [
+							"(",
+							messages.length,
+							")"
+						]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm
+				},
+				children: [
+					statusCounts.critical > 0 && /* @__PURE__ */ jsxs("span", {
+						style: {
+							color: tokens.colors.status.critical,
+							fontSize: tokens.typography.fontSize.xs,
+							fontWeight: tokens.typography.fontWeight.medium
+						},
+						children: [statusCounts.critical, " critical"]
+					}),
+					statusCounts.caution > 0 && /* @__PURE__ */ jsxs("span", {
+						style: {
+							color: tokens.colors.status.caution,
+							fontSize: tokens.typography.fontSize.xs,
+							fontWeight: tokens.typography.fontWeight.medium
+						},
+						children: [statusCounts.caution, " warn"]
+					}),
+					isPinned && /* @__PURE__ */ jsx(Icon, {
+						name: "lock",
+						size: 12,
+						color: tokens.colors.accent.primary
+					})
+				]
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-message-stream", collapsible ? "expanded" : "", className),
+		...collapsible ? handlers : {},
+		role: collapsible ? handlers.role : "log",
+		tabIndex: collapsible ? handlers.tabIndex : void 0,
+		"aria-expanded": collapsible ? handlers["aria-expanded"] : void 0,
+		style: {
+			...containerStyle,
+			cursor: collapsible ? "pointer" : void 0,
+			transition: collapsible ? `all ${transitionDuration} ease-out` : void 0
+		},
+		"aria-label": title || "Message stream",
+		"aria-live": "polite",
+		children: [(title || subtitle) && /* @__PURE__ */ jsxs("header", {
+			style: { marginBottom: 16 },
+			children: [title && /* @__PURE__ */ jsx("h3", {
+				style: {
+					fontSize: tokens.typography.fontSize.lg,
+					fontWeight: 500,
+					color: tokens.colors.text.primary,
+					margin: 0
+				},
+				children: title
+			}), subtitle && /* @__PURE__ */ jsx("p", {
+				style: {
+					fontSize: tokens.typography.fontSize.sm,
+					color: tokens.colors.text.tertiary,
+					margin: "4px 0 0 0"
+				},
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "list",
+			tabIndex: maxHeight ? 0 : void 0,
+			"aria-label": maxHeight ? `${title || "Messages"} scrollable list` : void 0,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: variant === "compact" ? 4 : 8,
+				...maxHeight && {
+					maxHeight,
+					overflowY: "auto",
+					paddingRight: 8
+				}
+			},
+			children: messages.length === 0 ? /* @__PURE__ */ jsx("div", {
+				style: {
+					textAlign: "center",
+					padding: 32,
+					color: tokens.colors.text.tertiary,
+					fontSize: tokens.typography.fontSize.sm
+				},
+				children: emptyMessage
+			}) : variant === "tree" ? messages.map((message, index) => /* @__PURE__ */ jsx(TreeNode, {
+				message,
+				tokens,
+				size,
+				showTimestamp: showTimestamps,
+				timeFormat,
+				onClick: onMessageClick,
+				depth: 0,
+				showConnectors,
+				isLast: index === messages.length - 1
+			}, message.id)) : messages.map((message) => /* @__PURE__ */ jsx(MessageCard, {
+				message,
+				tokens,
+				size,
+				showTimestamp: showTimestamps,
+				timeFormat,
+				onClick: onMessageClick,
+				variant
+			}, message.id))
+		})]
+	});
 });
-export {
-  MessageStream
-};
-//# sourceMappingURL=MessageStream.js.map
+//#endregion
+export { MessageStream, MessageStream as default };
+
+//# sourceMappingURL=MessageStream.js.map