@od-oneapp/uni-ui 2026.1.1301

package/dist/error-boundary-Ggc5btkU.mjs

@@ -0,0 +1,297 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { t as Button } from "./button-DVOrrZLw.mjs";
+import { a as Card } from "./integrations-lBG309ZD.mjs";
+import * as React$1 from "react";
+import { memo, useCallback, useMemo } from "react";
+import { useReducedMotion } from "@mantine/hooks";
+import { AlertCircle, AlertTriangle, Home, RefreshCw } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/elements/organisms/error-boundary/error-boundary.tsx
+/**
+* @fileoverview ErrorBoundary Component - Premium Harmony V2
+*
+* React error boundary component with customizable fallback UI and error handling.
+* Catches rendering errors and displays graceful fallback UIs with Premium Harmony V2 design.
+*
+* Features:
+* - ES2023 syntax with modern patterns
+* - Premium Harmony V2 design system with spring animations
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Super light/dark mode with seamless switching
+* - Two variants: page (full-page) and card (compact inline)
+* - Custom fallback component support
+* - Error callback for logging/monitoring
+* - Context string for error messages
+* - Development-only error stack display
+* - HOC wrapper (withErrorBoundary)
+* - Memoized fallback components
+* - Reduced motion support for accessibility
+* - Data attributes for testing and state tracking
+*
+* @module @od-oneapp/uni-ui/components/error-boundary
+* @component ErrorBoundary, CardErrorFallback, withErrorBoundary
+*
+* @useCases
+* - Wrapping entire page layouts to catch and recover from critical errors
+* - Protecting individual widgets/cards from crashing the entire application
+* - Providing graceful error experiences in dashboard and analytics views
+* - Isolating third-party components that may throw errors
+* - Creating resilient artifact viewers and content displays
+* - Building developer-friendly error displays with stack traces in development
+* - Implementing error boundaries in microfrontend architectures
+* - Protecting form sections from isolated validation errors
+*
+* @variants
+* - variant: page (default), card
+*
+* @example <ErrorBoundary context="dashboard" onError={logError}><Dashboard /></ErrorBoundary>
+* @example <ErrorBoundary variant="card" context="widget"><Widget /></ErrorBoundary>
+* @example const SafeComponent = withErrorBoundary(MyComponent, null, 'my-component');
+*/
+const ERROR_BOUNDARY_CONTAINER_CLASSNAME = "bg-background flex min-h-screen w-full items-center justify-center p-6";
+const ERROR_BOUNDARY_CARD_CLASSNAME = "w-full max-w-2xl space-y-6 p-8";
+const ERROR_BOUNDARY_HEADER_CLASSNAME = "text-destructive flex items-center gap-3";
+const ERROR_BOUNDARY_TITLE_CLASSNAME = "text-2xl font-semibold";
+const ERROR_BOUNDARY_MESSAGE_CLASSNAME = "text-muted-foreground";
+const ERROR_BOUNDARY_DETAILS_CLASSNAME = "mt-4";
+const ERROR_BOUNDARY_SUMMARY_CLASSNAME = "text-muted-foreground hover:text-foreground cursor-pointer text-sm font-medium";
+const ERROR_BOUNDARY_PRE_CLASSNAME = "bg-muted mt-2 overflow-auto rounded-md p-4 text-xs";
+const ERROR_BOUNDARY_ACTIONS_CLASSNAME = "flex flex-wrap gap-3";
+const ERROR_BOUNDARY_MESSAGE_CONTAINER_CLASSNAME = "space-y-2";
+const ERROR_BOUNDARY_ICON_CLASSNAME = "h-8 w-8";
+const ERROR_BOUNDARY_BUTTON_ICON_CLASSNAME = "mr-2 h-4 w-4";
+const ERROR_BOUNDARY_ANIMATION_CLASSNAME = "animate-in fade-in-0 zoom-in-95 duration-500 [animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)]";
+const ERROR_BOUNDARY_ANIMATION_REDUCED_CLASSNAME = "animate-in fade-in-0 duration-200";
+const ERROR_TITLE = "Something went wrong";
+const ERROR_DETAILS_SUMMARY = "Error Details (Development Only)";
+const TRY_AGAIN_LABEL = "Try Again";
+const RELOAD_PAGE_LABEL = "Reload Page";
+const RELOAD_ARTIFACT_LABEL = "Reload Artifact";
+const ERROR_MESSAGE_PREFIX = "An unexpected error occurred";
+const ERROR_MESSAGE_SUFFIX = "If this persists, please refresh or report it.";
+const ERROR_CONTEXT_PREFIX = "while using the";
+const ERROR_CONTEXT_DEFAULT = "in this component";
+const CARD_ERROR_MESSAGE = "The content encountered an error. Your data is safe and you can try again.";
+/**
+* Error boundary component with default fallback UI.
+*
+* Catches React errors in child components and displays a fallback UI.
+* Supports custom fallback components, error callbacks, and two variants.
+*
+* @example
+* ```tsx
+* // Full-page error (default)
+* <ErrorBoundary context="dashboard" onError={(error) => logError(error)}>
+*   <Dashboard />
+* </ErrorBoundary>
+* ```
+*
+* @example
+* ```tsx
+* // Compact card error for inline components
+* <ErrorBoundary variant="card" context="artifact">
+*   <ArtifactViewer />
+* </ErrorBoundary>
+* ```
+*
+* @example
+* ```tsx
+* <ErrorBoundary fallback={CustomErrorFallback}>
+*   <App />
+* </ErrorBoundary>
+* ```
+*/
+var ErrorBoundary = class extends React$1.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return {
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		this.props.onError?.(error, errorInfo);
+	}
+	resetError = () => {
+		this.setState({
+			hasError: false,
+			error: null
+		});
+	};
+	render() {
+		if (this.state.hasError && this.state.error) {
+			if (this.props.fallback) {
+				const Fallback = this.props.fallback;
+				return /* @__PURE__ */ jsx(Fallback, {
+					error: this.state.error,
+					resetError: this.resetError
+				});
+			}
+			if (this.props.variant === "card") return /* @__PURE__ */ jsx(CardErrorFallback, {
+				context: this.props.context,
+				error: this.state.error,
+				resetError: this.resetError,
+				minHeight: this.props.minHeight
+			});
+			return /* @__PURE__ */ jsx(DefaultErrorFallback, {
+				context: this.props.context,
+				error: this.state.error,
+				resetError: this.resetError
+			});
+		}
+		return this.props.children;
+	}
+};
+/**
+* Compact card-style error fallback for inline components.
+* Shows a red-bordered card with error icon, message, and action buttons.
+* Premium Harmony V2: Spring animations with reduced motion support.
+*/
+const CardErrorFallback = memo(function CardErrorFallback({ error, resetError, context, minHeight = "min-h-[400px]" }) {
+	const reducedMotion = useReducedMotion();
+	const errorMessage = error.message || "An unexpected error occurred";
+	const title = context ? `${context.charAt(0).toUpperCase()}${context.slice(1)} Error` : "Error";
+	const handleReload = useCallback(() => {
+		if (typeof window !== "undefined") window.location.reload();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-error-state": "visible",
+		"data-error-variant": "card",
+		className: cn("border-destructive/50 bg-destructive/5 flex flex-col items-center justify-center gap-4 rounded-lg border p-8", minHeight, reducedMotion ? ERROR_BOUNDARY_ANIMATION_REDUCED_CLASSNAME : ERROR_BOUNDARY_ANIMATION_CLASSNAME),
+		children: [
+			/* @__PURE__ */ jsx(AlertCircle, {
+				className: "text-destructive size-12",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-center",
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: "text-lg font-semibold",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground mt-2 text-sm",
+						children: CARD_ERROR_MESSAGE
+					}),
+					errorMessage ? /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground mt-1 font-mono text-xs",
+						children: errorMessage
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					onClick: resetError,
+					variant: "outline",
+					size: "sm",
+					children: RELOAD_ARTIFACT_LABEL
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: handleReload,
+					variant: "ghost",
+					size: "sm",
+					children: RELOAD_PAGE_LABEL
+				})]
+			})
+		]
+	});
+});
+const DefaultErrorFallback = memo(function DefaultErrorFallback({ error, resetError, context }) {
+	const reducedMotion = useReducedMotion();
+	const contextMessage = useMemo(() => context ? `${ERROR_CONTEXT_PREFIX} ${context}` : ERROR_CONTEXT_DEFAULT, [context]);
+	const errorMessage = useMemo(() => `${ERROR_MESSAGE_PREFIX} ${contextMessage}. ${ERROR_MESSAGE_SUFFIX}`, [contextMessage]);
+	const errorDetails = useMemo(() => {
+		return /* @__PURE__ */ jsxs("details", {
+			className: ERROR_BOUNDARY_DETAILS_CLASSNAME,
+			children: [/* @__PURE__ */ jsx("summary", {
+				className: ERROR_BOUNDARY_SUMMARY_CLASSNAME,
+				children: ERROR_DETAILS_SUMMARY
+			}), /* @__PURE__ */ jsxs("pre", {
+				className: ERROR_BOUNDARY_PRE_CLASSNAME,
+				children: [/* @__PURE__ */ jsx("code", { children: error.message }), error.stack ? /* @__PURE__ */ jsxs(Fragment$1, { children: ["\n\n", /* @__PURE__ */ jsx("code", { children: error.stack })] }) : null]
+			})]
+		});
+	}, [error.message, error.stack]);
+	const handleReload = useCallback(() => {
+		if (typeof window !== "undefined") window.location.reload();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: ERROR_BOUNDARY_CONTAINER_CLASSNAME,
+		"data-error-state": "visible",
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: cn(ERROR_BOUNDARY_CARD_CLASSNAME, reducedMotion ? ERROR_BOUNDARY_ANIMATION_REDUCED_CLASSNAME : ERROR_BOUNDARY_ANIMATION_CLASSNAME),
+			"data-error-variant": "page",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: ERROR_BOUNDARY_HEADER_CLASSNAME,
+					children: [/* @__PURE__ */ jsx(AlertTriangle, {
+						className: ERROR_BOUNDARY_ICON_CLASSNAME,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("h1", {
+						className: ERROR_BOUNDARY_TITLE_CLASSNAME,
+						children: ERROR_TITLE
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: ERROR_BOUNDARY_MESSAGE_CONTAINER_CLASSNAME,
+					children: [/* @__PURE__ */ jsx("p", {
+						className: ERROR_BOUNDARY_MESSAGE_CLASSNAME,
+						children: errorMessage
+					}), errorDetails]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: ERROR_BOUNDARY_ACTIONS_CLASSNAME,
+					children: [/* @__PURE__ */ jsxs(Button, {
+						onClick: resetError,
+						variant: "default",
+						type: "button",
+						children: [/* @__PURE__ */ jsx(RefreshCw, { className: ERROR_BOUNDARY_BUTTON_ICON_CLASSNAME }), TRY_AGAIN_LABEL]
+					}), /* @__PURE__ */ jsxs(Button, {
+						onClick: handleReload,
+						variant: "outline",
+						type: "button",
+						children: [/* @__PURE__ */ jsx(Home, { className: ERROR_BOUNDARY_BUTTON_ICON_CLASSNAME }), RELOAD_PAGE_LABEL]
+					})]
+				})
+			]
+		})
+	});
+});
+/**
+* Higher-order component that wraps a component with an error boundary.
+*
+* @template P - Component props type
+* @param {React.ComponentType<P>} Component - Component to wrap
+* @param {React.ComponentType<ErrorBoundaryFallbackProps>} [fallback] - Optional custom fallback component
+* @param {string} [context] - Optional context string for error messages
+* @param {(error: Error, info: React.ErrorInfo) => void} [onError] - Optional error handler
+* @returns {React.ComponentType<P>} Component wrapped with error boundary
+*
+* @example
+* ```tsx
+* const SafeComponent = withErrorBoundary(MyComponent, CustomFallback, 'dashboard');
+* ```
+*/
+function withErrorBoundary(Component, fallback, context, onError) {
+	return function WithErrorBoundaryComponent(props) {
+		return /* @__PURE__ */ jsx(ErrorBoundary, {
+			fallback,
+			context,
+			onError,
+			children: /* @__PURE__ */ jsx(Component, { ...props })
+		});
+	};
+}
+
+//#endregion
+export { ErrorBoundary as n, withErrorBoundary as r, CardErrorFallback as t };
+//# sourceMappingURL=error-boundary-Ggc5btkU.mjs.map

package/dist/error-boundary-Ggc5btkU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-boundary-Ggc5btkU.mjs","names":["React"],"sources":["../src/components/elements/organisms/error-boundary/error-boundary.tsx"],"sourcesContent":["/**\n * @fileoverview ErrorBoundary Component - Premium Harmony V2\n *\n * React error boundary component with customizable fallback UI and error handling.\n * Catches rendering errors and displays graceful fallback UIs with Premium Harmony V2 design.\n *\n * Features:\n * - ES2023 syntax with modern patterns\n * - Premium Harmony V2 design system with spring animations\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Super light/dark mode with seamless switching\n * - Two variants: page (full-page) and card (compact inline)\n * - Custom fallback component support\n * - Error callback for logging/monitoring\n * - Context string for error messages\n * - Development-only error stack display\n * - HOC wrapper (withErrorBoundary)\n * - Memoized fallback components\n * - Reduced motion support for accessibility\n * - Data attributes for testing and state tracking\n *\n * @module @od-oneapp/uni-ui/components/error-boundary\n * @component ErrorBoundary, CardErrorFallback, withErrorBoundary\n *\n * @useCases\n * - Wrapping entire page layouts to catch and recover from critical errors\n * - Protecting individual widgets/cards from crashing the entire application\n * - Providing graceful error experiences in dashboard and analytics views\n * - Isolating third-party components that may throw errors\n * - Creating resilient artifact viewers and content displays\n * - Building developer-friendly error displays with stack traces in development\n * - Implementing error boundaries in microfrontend architectures\n * - Protecting form sections from isolated validation errors\n *\n * @variants\n * - variant: page (default), card\n *\n * @example <ErrorBoundary context=\"dashboard\" onError={logError}><Dashboard /></ErrorBoundary>\n * @example <ErrorBoundary variant=\"card\" context=\"widget\"><Widget /></ErrorBoundary>\n * @example const SafeComponent = withErrorBoundary(MyComponent, null, 'my-component');\n */\n\n'use client';\n\nimport * as React from 'react';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { useReducedMotion } from '@mantine/hooks';\nimport { AlertCircle, AlertTriangle, Home, RefreshCw } from 'lucide-react';\n\nimport { cn } from '../../../../lib/utils';\nimport { Button } from '../../atoms/button';\nimport { Card } from '../card';\n\n// =============================================================================\n// Static classNames for page variant (Premium Harmony V2)\n// =============================================================================\nconst ERROR_BOUNDARY_CONTAINER_CLASSNAME =\n  'bg-background flex min-h-screen w-full items-center justify-center p-6';\nconst ERROR_BOUNDARY_CARD_CLASSNAME = 'w-full max-w-2xl space-y-6 p-8';\nconst ERROR_BOUNDARY_HEADER_CLASSNAME = 'text-destructive flex items-center gap-3';\nconst ERROR_BOUNDARY_TITLE_CLASSNAME = 'text-2xl font-semibold';\nconst ERROR_BOUNDARY_MESSAGE_CLASSNAME = 'text-muted-foreground';\nconst ERROR_BOUNDARY_DETAILS_CLASSNAME = 'mt-4';\nconst ERROR_BOUNDARY_SUMMARY_CLASSNAME =\n  'text-muted-foreground hover:text-foreground cursor-pointer text-sm font-medium';\nconst ERROR_BOUNDARY_PRE_CLASSNAME = 'bg-muted mt-2 overflow-auto rounded-md p-4 text-xs';\nconst ERROR_BOUNDARY_ACTIONS_CLASSNAME = 'flex flex-wrap gap-3';\nconst ERROR_BOUNDARY_MESSAGE_CONTAINER_CLASSNAME = 'space-y-2';\nconst ERROR_BOUNDARY_ICON_CLASSNAME = 'h-8 w-8';\nconst ERROR_BOUNDARY_BUTTON_ICON_CLASSNAME = 'mr-2 h-4 w-4';\n\n// Premium Harmony V2: Spring animation classes\n// Uses cubic-bezier for spring-like physics (0.34, 1.56, 0.64, 1) - gentle bounce\nconst ERROR_BOUNDARY_ANIMATION_CLASSNAME =\n  'animate-in fade-in-0 zoom-in-95 duration-500 [animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)]';\nconst ERROR_BOUNDARY_ANIMATION_REDUCED_CLASSNAME = 'animate-in fade-in-0 duration-200';\n\n// =============================================================================\n// Static strings\n// =============================================================================\nconst ERROR_TITLE = 'Something went wrong';\nconst ERROR_DETAILS_SUMMARY = 'Error Details (Development Only)';\nconst TRY_AGAIN_LABEL = 'Try Again';\nconst RELOAD_PAGE_LABEL = 'Reload Page';\nconst RELOAD_ARTIFACT_LABEL = 'Reload Artifact';\nconst ERROR_MESSAGE_PREFIX = 'An unexpected error occurred';\nconst ERROR_MESSAGE_SUFFIX = 'If this persists, please refresh or report it.';\nconst ERROR_CONTEXT_PREFIX = 'while using the';\nconst ERROR_CONTEXT_DEFAULT = 'in this component';\nconst CARD_ERROR_MESSAGE =\n  'The content encountered an error. Your data is safe and you can try again.';\n\n// Static values - moved outside components to prevent recreation\nconst IS_DEVELOPMENT = process.env.NODE_ENV === 'development';\n\n/** Error boundary variant type */\nexport type ErrorBoundaryVariant = 'page' | 'card';\n\n/**\n * Error boundary component props.\n */\nexport interface ErrorBoundaryProps {\n  /** Child components to wrap */\n  children: React.ReactNode;\n  /** Custom fallback component to render on error */\n  fallback?: React.ComponentType<ErrorBoundaryFallbackProps>;\n  /** Context string for error messages (e.g., \"dashboard\", \"artifact\") */\n  context?: string;\n  /** Error handler callback */\n  onError?: (error: Error, info: React.ErrorInfo) => void;\n  /** Variant: 'page' for full-page errors, 'card' for inline compact errors */\n  variant?: ErrorBoundaryVariant;\n  /** Minimum height for the card variant container */\n  minHeight?: string;\n}\n\n/**\n * Error boundary fallback component props.\n */\nexport interface ErrorBoundaryFallbackProps {\n  /** The error that occurred */\n  error: Error;\n  /** Function to reset the error boundary */\n  resetError: () => void;\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n  error: Error | null;\n}\n\n/**\n * Error boundary component with default fallback UI.\n *\n * Catches React errors in child components and displays a fallback UI.\n * Supports custom fallback components, error callbacks, and two variants.\n *\n * @example\n * ```tsx\n * // Full-page error (default)\n * <ErrorBoundary context=\"dashboard\" onError={(error) => logError(error)}>\n *   <Dashboard />\n * </ErrorBoundary>\n * ```\n *\n * @example\n * ```tsx\n * // Compact card error for inline components\n * <ErrorBoundary variant=\"card\" context=\"artifact\">\n *   <ArtifactViewer />\n * </ErrorBoundary>\n * ```\n *\n * @example\n * ```tsx\n * <ErrorBoundary fallback={CustomErrorFallback}>\n *   <App />\n * </ErrorBoundary>\n * ```\n */\nexport class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = {\n      hasError: false,\n      error: null,\n    };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return {\n      hasError: true,\n      error,\n    };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    this.props.onError?.(error, errorInfo);\n  }\n\n  resetError = () => {\n    this.setState({\n      hasError: false,\n      error: null,\n    });\n  };\n\n  render() {\n    if (this.state.hasError && this.state.error) {\n      if (this.props.fallback) {\n        const Fallback = this.props.fallback;\n        return <Fallback error={this.state.error} resetError={this.resetError} />;\n      }\n\n      // Use card variant for compact inline errors\n      if (this.props.variant === 'card') {\n        return (\n          <CardErrorFallback\n            context={this.props.context}\n            error={this.state.error}\n            resetError={this.resetError}\n            minHeight={this.props.minHeight}\n          />\n        );\n      }\n\n      return (\n        <DefaultErrorFallback\n          context={this.props.context}\n          error={this.state.error}\n          resetError={this.resetError}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\n// =============================================================================\n// Card Error Fallback - Compact inline error display\n// =============================================================================\n\ninterface CardErrorFallbackProps extends ErrorBoundaryFallbackProps {\n  context?: string;\n  minHeight?: string;\n}\n\n/**\n * Compact card-style error fallback for inline components.\n * Shows a red-bordered card with error icon, message, and action buttons.\n * Premium Harmony V2: Spring animations with reduced motion support.\n */\nexport const CardErrorFallback = memo(function CardErrorFallback({\n  error,\n  resetError,\n  context,\n  minHeight = 'min-h-[400px]',\n}: CardErrorFallbackProps) {\n  // Premium Harmony V2: Check reduced motion preference\n  const reducedMotion = useReducedMotion();\n\n  const errorMessage = error.message || 'An unexpected error occurred';\n\n  // Format context for display (e.g., \"dashboard\" -> \"Dashboard Error\")\n  const title = context ? `${context.charAt(0).toUpperCase()}${context.slice(1)} Error` : 'Error';\n\n  const handleReload = useCallback(() => {\n    if (typeof window !== 'undefined') {\n      window.location.reload();\n    }\n  }, []);\n\n  return (\n    <div\n      data-error-state=\"visible\"\n      data-error-variant=\"card\"\n      className={cn(\n        'border-destructive/50 bg-destructive/5 flex flex-col items-center justify-center gap-4 rounded-lg border p-8',\n        minHeight,\n        // Premium Harmony V2: Spring animation with reduced motion support\n        reducedMotion\n          ? ERROR_BOUNDARY_ANIMATION_REDUCED_CLASSNAME\n          : ERROR_BOUNDARY_ANIMATION_CLASSNAME,\n      )}\n    >\n      <AlertCircle className=\"text-destructive size-12\" aria-hidden=\"true\" />\n      <div className=\"text-center\">\n        <h3 className=\"text-lg font-semibold\">{title}</h3>\n        <p className=\"text-muted-foreground mt-2 text-sm\">{CARD_ERROR_MESSAGE}</p>\n        {errorMessage ? (\n          <p className=\"text-muted-foreground mt-1 font-mono text-xs\">{errorMessage}</p>\n        ) : null}\n      </div>\n      <div className=\"flex gap-2\">\n        <Button onClick={resetError} variant=\"outline\" size=\"sm\">\n          {RELOAD_ARTIFACT_LABEL}\n        </Button>\n        <Button onClick={handleReload} variant=\"ghost\" size=\"sm\">\n          {RELOAD_PAGE_LABEL}\n        </Button>\n      </div>\n    </div>\n  );\n});\n\n// =============================================================================\n// Default Error Fallback - Full-page error display\n// =============================================================================\n\ninterface DefaultErrorFallbackProps extends ErrorBoundaryFallbackProps {\n  context?: string;\n}\n\nconst DefaultErrorFallback = memo(function DefaultErrorFallback({\n  error,\n  resetError,\n  context,\n}: DefaultErrorFallbackProps) {\n  // Premium Harmony V2: Check reduced motion preference\n  const reducedMotion = useReducedMotion();\n\n  // Memoize context message to prevent unnecessary re-computation\n  const contextMessage = useMemo(\n    () => (context ? `${ERROR_CONTEXT_PREFIX} ${context}` : ERROR_CONTEXT_DEFAULT),\n    [context],\n  );\n\n  // Memoize full error message to prevent unnecessary re-computation\n  const errorMessage = useMemo(\n    () => `${ERROR_MESSAGE_PREFIX} ${contextMessage}. ${ERROR_MESSAGE_SUFFIX}`,\n    [contextMessage],\n  );\n\n  // Memoize error details to prevent unnecessary re-computation\n  const errorDetails = useMemo(() => {\n    if (!IS_DEVELOPMENT) return null;\n\n    return (\n      <details className={ERROR_BOUNDARY_DETAILS_CLASSNAME}>\n        <summary className={ERROR_BOUNDARY_SUMMARY_CLASSNAME}>{ERROR_DETAILS_SUMMARY}</summary>\n        <pre className={ERROR_BOUNDARY_PRE_CLASSNAME}>\n          <code>{error.message}</code>\n          {error.stack ? (\n            <>\n              {'\\n\\n'}\n              <code>{error.stack}</code>\n            </>\n          ) : null}\n        </pre>\n      </details>\n    );\n  }, [error.message, error.stack]);\n\n  // Memoize reload handler to prevent unnecessary re-renders\n  const handleReload = useCallback(() => {\n    if (typeof window !== 'undefined') {\n      window.location.reload();\n    }\n  }, []);\n\n  return (\n    <div className={ERROR_BOUNDARY_CONTAINER_CLASSNAME} data-error-state=\"visible\">\n      <Card\n        className={cn(\n          ERROR_BOUNDARY_CARD_CLASSNAME,\n          // Premium Harmony V2: Spring animation with reduced motion support\n          reducedMotion\n            ? ERROR_BOUNDARY_ANIMATION_REDUCED_CLASSNAME\n            : ERROR_BOUNDARY_ANIMATION_CLASSNAME,\n        )}\n        data-error-variant=\"page\"\n      >\n        <div className={ERROR_BOUNDARY_HEADER_CLASSNAME}>\n          <AlertTriangle className={ERROR_BOUNDARY_ICON_CLASSNAME} aria-hidden=\"true\" />\n          <h1 className={ERROR_BOUNDARY_TITLE_CLASSNAME}>{ERROR_TITLE}</h1>\n        </div>\n\n        <div className={ERROR_BOUNDARY_MESSAGE_CONTAINER_CLASSNAME}>\n          <p className={ERROR_BOUNDARY_MESSAGE_CLASSNAME}>{errorMessage}</p>\n          {errorDetails}\n        </div>\n\n        <div className={ERROR_BOUNDARY_ACTIONS_CLASSNAME}>\n          <Button onClick={resetError} variant=\"default\" type=\"button\">\n            <RefreshCw className={ERROR_BOUNDARY_BUTTON_ICON_CLASSNAME} />\n            {TRY_AGAIN_LABEL}\n          </Button>\n          <Button onClick={handleReload} variant=\"outline\" type=\"button\">\n            <Home className={ERROR_BOUNDARY_BUTTON_ICON_CLASSNAME} />\n            {RELOAD_PAGE_LABEL}\n          </Button>\n        </div>\n      </Card>\n    </div>\n  );\n});\n\n/**\n * Higher-order component that wraps a component with an error boundary.\n *\n * @template P - Component props type\n * @param {React.ComponentType<P>} Component - Component to wrap\n * @param {React.ComponentType<ErrorBoundaryFallbackProps>} [fallback] - Optional custom fallback component\n * @param {string} [context] - Optional context string for error messages\n * @param {(error: Error, info: React.ErrorInfo) => void} [onError] - Optional error handler\n * @returns {React.ComponentType<P>} Component wrapped with error boundary\n *\n * @example\n * ```tsx\n * const SafeComponent = withErrorBoundary(MyComponent, CustomFallback, 'dashboard');\n * ```\n */\nexport function withErrorBoundary<P extends object>(\n  Component: React.ComponentType<P>,\n  fallback?: React.ComponentType<ErrorBoundaryFallbackProps>,\n  context?: string,\n  onError?: (error: Error, info: React.ErrorInfo) => void,\n) {\n  return function WithErrorBoundaryComponent(props: P) {\n    return (\n      <ErrorBoundary fallback={fallback} context={context} onError={onError}>\n        <Component {...props} />\n      </ErrorBoundary>\n    );\n  };\n}\n"],"mappings":"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"}

package/dist/filter-list-BMT7Nrli.d.mts

@@ -0,0 +1,27 @@
+
+import { i as FilterOption, n as Filter, t as ActiveFilter } from "./types-B8z57DW2.mjs";
+import { ComponentPropsWithoutRef, ComponentType } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/filter/filter-list/filter-list.d.ts
+interface FilterListProps {
+  filters: Filter[];
+  activeFilters?: ActiveFilter[];
+  onRemove: (key: string, value: FilterOption['value']) => void;
+  onRemoveAll: () => void;
+  onSelect?: (key: string, value: FilterOption['value']) => void;
+  className?: string;
+  LinkComponent?: ComponentType<ComponentPropsWithoutRef<'a'>> | 'a';
+}
+declare function FilterList({
+  filters,
+  activeFilters,
+  onRemove,
+  onRemoveAll,
+  onSelect,
+  className,
+  LinkComponent
+}: FilterListProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FilterListProps as n, FilterList as t };
+//# sourceMappingURL=filter-list-BMT7Nrli.d.mts.map

package/dist/filter-list-B_9aV5Lp.mjs

@@ -0,0 +1,279 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { t as AnimatedSizeContainer } from "./animated-size-container-DSKNt1Cn.mjs";
+import { t as Combobox } from "./combobox-uEKksQFR.mjs";
+import { isValidElement, useState } from "react";
+import { useHotkeys } from "@mantine/hooks";
+import { X } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Logger } from "@repo/shared";
+
+//#region src/components/filter/filter-list/filter-list.tsx
+/**
+* @fileoverview FilterList Component - Premium Harmony V2
+*
+* Displays active filters as interactive pills with remove functionality and
+* inline editing support. Built with Premium Harmony V2 design standards.
+*
+* Features:
+* - Premium Harmony V2 spring physics for smooth entrance/exit
+* - Touch-optimized 44px minimum targets for filter pills
+* - Reduced motion support for accessibility
+* - Semantic color tokens for theme adaptation
+* - Inline editing support for active filters
+* - Hotkey support for quick removal (Escape)
+* - Animated size container for smooth layout shifts
+* - AnimatePresence for individual pill transitions
+* - Data attributes for state tracking
+*
+* @module @od-oneapp/uni-ui/components/filter/filter-list
+* @component FilterList
+*
+* @useCases
+* - Displaying active search filters in data-heavy views
+* - Providing quick-remove chips for faceted navigation
+* - Showing selected criteria in reports or analytics
+* - Mobile-friendly filter management interfaces
+* - Real-time filtering with visual feedback
+*
+* @example
+* <FilterList
+*   filters={availableFilters}
+*   activeFilters={activeFilters}
+*   onRemove={handleRemove}
+*   onRemoveAll={handleClearAll}
+* />
+*/
+const logger = new Logger("uni-ui:filter-list");
+const isReactNode = (element) => isValidElement(element);
+function OptionDisplay({ icon: Icon, label, permalink, displayClassName, LinkComponent = "a" }) {
+	const iconElement = (() => {
+		if (Icon == null) return null;
+		if (isValidElement(Icon)) return Icon;
+		if (typeof Icon === "function") return /* @__PURE__ */ jsx(Icon, { className: "size-4" });
+		return Icon;
+	})();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2.5 px-3 py-2", displayClassName),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground shrink-0",
+			children: iconElement
+		}), permalink != null ? /* @__PURE__ */ jsx(LinkComponent, {
+			href: permalink,
+			target: "_blank",
+			className: "cursor-alias decoration-dotted underline-offset-2 hover:underline",
+			children: label
+		}) : label]
+	});
+}
+/**
+* Displays active filters as pills with remove functionality.
+*
+* @example
+* <FilterList
+*   filters={filters}
+*   activeFilters={activeFilters}
+*   onRemove={handleRemove}
+*   onRemoveAll={handleRemoveAll}
+*   onSelect={handleSelect}
+* />
+*/
+function FilterList({ filters, activeFilters, onRemove, onRemoveAll, onSelect, className, LinkComponent = "a" }) {
+	useHotkeys([["Escape", onRemoveAll]]);
+	return /* @__PURE__ */ jsx(AnimatedSizeContainer, {
+		height: true,
+		className: "w-full",
+		transition: {
+			type: "tween",
+			duration: .3
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex w-full flex-wrap items-start gap-4 sm:flex-nowrap", className),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex grow flex-wrap gap-x-4 gap-y-2",
+				children: /* @__PURE__ */ jsx(AnimatePresence, { children: activeFilters?.map(({ key, value: filterValue }) => {
+					if (key === "loader") return /* @__PURE__ */ jsx(motion.div, {
+						initial: {
+							opacity: 0,
+							y: 4
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						className: "border-border bg-background h-9 w-48 animate-pulse rounded-md border"
+					}, `loader-${String(filterValue)}`);
+					const filter = filters.find((f) => f.key === key);
+					if (filter == null) {
+						logger.error("Filter.List received an activeFilter without a corresponding filter", { key });
+						return null;
+					}
+					return (filter.multiple === true && Array.isArray(filterValue) ? filterValue : [filterValue]).map((value) => {
+						const option = filter.options?.find((o) => typeof o.value === "string" && typeof value === "string" ? o.value.toLowerCase() === value.toLowerCase() : o.value === value);
+						const OptionIcon = option?.icon ?? filter.getOptionIcon?.(value, {
+							key: filter.key,
+							option
+						}) ?? filter.icon;
+						const optionLabel = option?.label ?? filter.getOptionLabel?.(value, {
+							key: filter.key,
+							option
+						}) ?? String(value);
+						const optionPermalink = option?.permalink ?? filter.getOptionPermalink?.(value) ?? null;
+						const truncatedLabel = optionLabel.length > 30 ? `${optionLabel.slice(0, 30)}...` : optionLabel;
+						return /* @__PURE__ */ jsxs(motion.div, {
+							initial: {
+								opacity: 0,
+								y: 4
+							},
+							animate: {
+								opacity: 1,
+								y: 0
+							},
+							className: "divide-border border-border bg-background text-foreground flex items-center divide-x rounded-md border text-sm",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2.5 px-3 py-2",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground shrink-0",
+										children: isReactNode(filter.icon) ? filter.icon : /* @__PURE__ */ jsx(filter.icon, { className: "size-4" })
+									}), filter.label]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "text-muted-foreground px-3 py-2",
+									children: "is"
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "flex items-center",
+									children: (() => {
+										if (filter.options == null) return /* @__PURE__ */ jsx("div", {
+											className: "flex items-center gap-2.5 px-3 py-2",
+											children: /* @__PURE__ */ jsx("div", { className: "bg-muted h-5 w-12 animate-pulse rounded-md" })
+										});
+										if (onSelect != null && filter.hideInFilterDropdown !== true) return /* @__PURE__ */ jsx(FilterCombobox, {
+											filter,
+											value,
+											filterKey: key,
+											onRemove,
+											onSelect,
+											optionIcon: OptionIcon,
+											optionLabel,
+											optionPermalink,
+											truncatedLabel,
+											LinkComponent
+										});
+										return /* @__PURE__ */ jsx(OptionDisplay, {
+											icon: OptionIcon,
+											label: truncatedLabel,
+											LinkComponent,
+											permalink: optionPermalink
+										});
+									})()
+								}),
+								/* @__PURE__ */ jsx(motion.button, {
+									type: "button",
+									className: "text-muted-foreground ring-ring hover:bg-muted hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background h-full rounded-r-md p-2 transition-transform ring-inset focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+									onClick: () => onRemove(key, value),
+									whileTap: { scale: .98 },
+									transition: {
+										type: "spring",
+										stiffness: 500,
+										damping: 30
+									},
+									children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+								})
+							]
+						}, `${key}-${String(value)}`);
+					});
+				}) })
+			}), activeFilters != null && activeFilters.length !== 0 && /* @__PURE__ */ jsxs(motion.button, {
+				type: "button",
+				className: "group text-muted-foreground ring-ring hover:border-border hover:bg-background hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background mt-px flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm whitespace-nowrap transition-colors ring-inset focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+				onClick: onRemoveAll,
+				whileTap: { scale: .98 },
+				transition: {
+					type: "spring",
+					stiffness: 500,
+					damping: 30
+				},
+				children: ["Clear Filters", /* @__PURE__ */ jsx("kbd", {
+					className: "border-border text-foreground group-hover:bg-muted rounded-md border px-1.5 py-0.5 text-xs",
+					children: "ESC"
+				})]
+			})]
+		})
+	});
+}
+function FilterCombobox({ filter, value, filterKey, onRemove, onSelect, optionIcon, optionLabel, optionPermalink, truncatedLabel, LinkComponent = "a" }) {
+	const [search, setSearch] = useState("");
+	const options = filter.options?.map((opt) => {
+		const optionIcon = opt.icon ?? filter.getOptionIcon?.(opt.value, {
+			key: filter.key,
+			option: opt
+		}) ?? filter.icon;
+		return {
+			label: opt.label ?? filter.getOptionLabel?.(opt.value, {
+				key: filter.key,
+				option: opt
+			}) ?? String(opt.value),
+			value: String(opt.value),
+			icon: optionIcon
+		};
+	}) ?? [];
+	const selectedOption = options.find((opt) => typeof opt.value === "string" && typeof value === "string" ? opt.value.toLowerCase() === String(value).toLowerCase() : opt.value === String(value));
+	const hasEmptyOptions = filter.options?.length === 0;
+	const emptyState = (() => {
+		if (hasEmptyOptions) {
+			if (search === "") return /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground p-2 text-center text-sm",
+				children: "Start typing to search..."
+			});
+			return null;
+		}
+		return /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground p-2 text-center text-sm",
+			children: "No matching options"
+		});
+	})();
+	const displayLabel = optionLabel.length > 30 ? `${optionLabel.slice(0, 30)}...` : optionLabel;
+	return /* @__PURE__ */ jsx(Combobox, {
+		selected: selectedOption ?? null,
+		setSelected: (newOption) => {
+			if (newOption != null && newOption.value !== String(value)) {
+				onRemove(filterKey, value);
+				onSelect(filterKey, newOption.value);
+			}
+		},
+		options,
+		onSearchChange: setSearch,
+		onCreate: hasEmptyOptions ? async (searchValue) => {
+			onRemove(filterKey, value);
+			onSelect(filterKey, searchValue);
+			return true;
+		} : void 0,
+		createLabel: hasEmptyOptions ? (searchValue) => searchValue : void 0,
+		createIcon: typeof filter.icon === "function" && !isValidElement(filter.icon) ? filter.icon : void 0,
+		optionRight: (option) => {
+			if (option.value === String(value)) return null;
+			const filterOption = filter.options?.find((opt) => typeof String(opt.value) === "string" && typeof option.value === "string" ? String(opt.value).toLowerCase() === option.value.toLowerCase() : String(opt.value) === option.value);
+			return filterOption?.right != null ? /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground ml-2",
+				children: filterOption.right
+			}) : null;
+		},
+		placeholder: displayLabel,
+		caret: false,
+		emptyState,
+		trigger: /* @__PURE__ */ jsx(OptionDisplay, {
+			icon: optionIcon,
+			label: truncatedLabel,
+			permalink: optionPermalink,
+			displayClassName: "cursor-pointer hover:bg-muted",
+			LinkComponent
+		})
+	});
+}
+
+//#endregion
+export { FilterList as t };
+//# sourceMappingURL=filter-list-B_9aV5Lp.mjs.map