function ErrorBoundary1({ componentName, children }) { const [hasError, setHasError] = useState(false); const [error, setError] = useState(null); const [errorInfo, setErrorInfo] = useState(null); useEffect(()=>{ if (hasError && error) { fetch("/api/log-error", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ error_type: "client_error", message: error.message, stack_trace: errorInfo?.componentStack, component: componentName || "Unknown", severity: "high", metadata: { url: window.location.href, userAgent: navigator.userAgent, timestamp: new Date().toISOString() } }) }).catch(console.error); } }, [ hasError, error, errorInfo, componentName ]); const handleError = (error)=>{ setHasError(true); setError(error); fetch("/api/log-error", { method: "POST", body: JSON.stringify({ error, context: { component: componentName || "ErrorBoundary", errorInfo }, severity: "error" }) }).catch(console.error); }; if (hasError) { return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center bg-gray-50 p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md rounded-lg bg-white p-6 shadow-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-xl font-semibold text-red-600", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Something went wrong"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-gray-600", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "We have been notified and will fix this as soon as possible."), process.env.NODE_ENV === "development" && /*#__PURE__*/ React.createElement("pre", { className: "mb-4 overflow-auto rounded bg-gray-100 p-4 text-left text-sm", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, error?.toString()), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "rounded bg-[#357AFF] px-4 py-2 text-white hover:bg-[#2E69DE]", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Reload Page"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.history.back(), className: "rounded bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Go Back"))))); } try { return children; } catch (error) { handleError(error); return null; } } function ErrorBoundary1Story() { const BuggyComponent = ()=>{ throw new Error("Test error"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 12 }, __self: this }, "This will never render"); }; const SafeComponent = ()=>{ return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 12 }, __self: this }, "This component works fine"); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-8", __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "Working Component:"), /*#__PURE__*/ React.createElement(ErrorBoundary1, { componentName: "SafeComponent", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(SafeComponent, { __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "Error State:"), /*#__PURE__*/ React.createElement(ErrorBoundary1, { componentName: "BuggyComponent", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BuggyComponent, { __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this })))); } function AuthLoadingState({ children, loading, error, action = "Loading..." }) { const { data: user, loading: userLoading } = useUser(); const [showLoading, setShowLoading] = useState(false); useEffect(()=>{ if (loading || userLoading) { const timer = setTimeout(()=>setShowLoading(true), 500); return ()=>clearTimeout(timer); } setShowLoading(false); }, [ loading, userLoading ]); if (error) { return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-50 p-4 text-red-700", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, error.message || "An error occurred")); } if (showLoading) { return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-[#357AFF]", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, action))); } return children; } function AuthLoadingStateStory() { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-medium", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Default Loading State"), /*#__PURE__*/ React.createElement(AuthLoadingState, { loading: true, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "This content is hidden while loading"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-medium", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Custom Action Text"), /*#__PURE__*/ React.createElement(AuthLoadingState, { loading: true, action: "Saving your changes...", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "This content is hidden while loading"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-medium", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(AuthLoadingState, { error: { message: "Failed to load user data" }, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "This content is hidden during error"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-medium", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Content Visible"), /*#__PURE__*/ React.createElement(AuthLoadingState, { loading: false, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-white p-4 shadow", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Content is visible when not loading")))); } class ErrorBoundary extends React.Component { constructor(props){ super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { console.error("Error caught by boundary:", error, errorInfo); } render() { if (this.state.hasError) { return this.props.fallback(this.state.error); } return this.props.children; } } function ErrorBoundary12({ children, fallback }) { return /*#__PURE__*/ React.createElement(React.Fragment, null); } function ErrorBoundary12Story() { const BuggyCounter = ()=>{ const [count, setCount] = useState(0); if (count === 5) { throw new Error("I crashed on purpose!"); } return /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCount((c)=>c + 1), className: "px-4 py-2 bg-[#357AFF] text-white rounded-lg hover:bg-[#2E69DE]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "Count: ", count); }; const CustomErrorFallback = (error)=>/*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-orange-50 p-6", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bug text-orange-500 mr-3 text-xl", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-orange-800", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Custom Error Display"), /*#__PURE__*/ React.createElement("p", { className: "text-orange-700 mt-1", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, error?.message || "Something unexpected happened")))); return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Default Error Boundary"), /*#__PURE__*/ React.createElement(ErrorBoundary12, { __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BuggyCounter, { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Custom Error Fallback"), /*#__PURE__*/ React.createElement(ErrorBoundary12, { fallback: CustomErrorFallback, __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BuggyCounter, { __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "No Error State"), /*#__PURE__*/ React.createElement(ErrorBoundary12, { __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-green-50 rounded-lg text-green-700", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "This content renders normally")))); } function RoutineList({ routines = [], onToggleStep }) { const [expandedRoutines, setExpandedRoutines] = useState(new Set()); const toggleRoutine = (routineId)=>{ setExpandedRoutines((prev)=>{ const newSet = new Set(prev); if (newSet.has(routineId)) { newSet.delete(routineId); } else { newSet.add(routineId); } return newSet; }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full space-y-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, routines.map((routine)=>/*#__PURE__*/ React.createElement("div", { key: routine.id, className: "rounded-lg border border-gray-200 bg-white shadow-sm", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: ()=>toggleRoutine(routine.id), className: "flex cursor-pointer items-center justify-between p-4 hover:bg-gray-50", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, routine.name), routine.time_of_day && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-clock mr-1", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }), routine.time_of_day)), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${expandedRoutines.has(routine.id) ? "up" : "down"} text-gray-400`, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), expandedRoutines.has(routine.id) && /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, routine.steps.map((step)=>/*#__PURE__*/ React.createElement("li", { key: step.id, className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: step.completed, onChange: ()=>onToggleStep(routine.id, step.id), className: "h-5 w-5 rounded border-gray-300 text-[#357AFF] focus:ring-[#357AFF]", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `text-gray-700 ${step.completed ? "line-through text-gray-400" : ""}`, __source: { fileName: "", lineNumber: 54, columnNumber: 21 }, __self: this }, step.description))))))), routines.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg border border-gray-200 bg-white p-8 text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "No routines found"))); } function RoutineListStory() { const [mockRoutines, setMockRoutines] = useState([ { id: 1, name: "Morning Routine", time_of_day: "08:00", days_of_week: "Monday,Wednesday,Friday", steps: [ { id: 1, description: "Wake up", completed: true }, { id: 2, description: "Brush teeth", completed: false }, { id: 3, description: "Exercise", completed: false } ] }, { id: 2, name: "Evening Routine", time_of_day: "20:00", days_of_week: "Every day", steps: [ { id: 4, description: "Review tasks", completed: false }, { id: 5, description: "Plan tomorrow", completed: false }, { id: 6, description: "Read a book", completed: false } ] } ]); const handleToggleStep = (routineId, stepId)=>{ setMockRoutines((prevRoutines)=>prevRoutines.map((routine)=>routine.id === routineId ? { ...routine, steps: routine.steps.map((step)=>step.id === stepId ? { ...step, completed: !step.completed } : step) } : routine)); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, "With Routines"), /*#__PURE__*/ React.createElement(RoutineList, { routines: mockRoutines, onToggleStep: handleToggleStep, __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, "Empty State"), /*#__PURE__*/ React.createElement(RoutineList, { routines: [], onToggleStep: handleToggleStep, __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this })); } function AuthLoadingState2({ action = "Loading...", theme = { colorScheme: "light", animationLevel: "moderate" }, children, onSessionUpdate }) { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const overlayRef = useRef(null); useEffect(()=>{ async function updateSessionStatus() { try { const response = await fetch("/api/auth/session/update", { method: "POST" }); if (!response.ok) { throw new Error("Failed to update session"); } onSessionUpdate?.(); } catch (error) { console.error("Session update failed:", error); setError("Session update failed"); } finally{ setLoading(false); } } updateSessionStatus(); const intervalId = setInterval(updateSessionStatus, 5 * 60 * 1000); return ()=>clearInterval(intervalId); }, [ onSessionUpdate ]); useEffect(()=>{ if (overlayRef.current) { if (loading) { overlayRef.current.classList.remove("hidden"); } else { overlayRef.current.classList.add("hidden"); } } }, [ loading ]); const bgColor = theme.colorScheme === "light" ? "bg-white" : "bg-gray-800"; const textColor = theme.colorScheme === "light" ? "text-gray-700" : "text-white"; const spinnerColor = theme.colorScheme === "light" ? "border-[#357AFF]" : "border-[#2E69DE]"; const spinnerAnimation = theme.animationLevel === "reduced" ? "rotate-90" : "animate-spin"; if (error) { return /*#__PURE__*/ React.createElement("div", { className: "text-red-500", __source: { fileName: "", lineNumber: 58, columnNumber: 12 }, __self: this }, error); } return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: overlayRef, className: "fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-lg ${bgColor} p-6 text-center shadow-xl`, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `mx-auto mb-4 h-12 w-12 rounded-full border-4 ${spinnerColor} border-t-transparent ${spinnerAnimation}`, role: "progressbar", "aria-label": "Loading indicator", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: textColor, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, action))), children); } function AuthLoadingState2Story() { const handleSessionUpdate = ()=>{ console.log("Session updated"); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-8", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Light Theme (Default)"), /*#__PURE__*/ React.createElement(AuthLoadingState2, { action: "Signing in...", onSessionUpdate: handleSessionUpdate, __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Session Active Content"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900 p-4 rounded-lg", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold text-white", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "Dark Theme"), /*#__PURE__*/ React.createElement(AuthLoadingState2, { action: "Extending session...", theme: { colorScheme: "dark", animationLevel: "moderate" }, onSessionUpdate: handleSessionUpdate, __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-gray-700 rounded text-white", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Session Active Content"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "Reduced Motion"), /*#__PURE__*/ React.createElement(AuthLoadingState2, { action: "Verifying credentials...", theme: { colorScheme: "light", animationLevel: "reduced" }, onSessionUpdate: handleSessionUpdate, __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Session Active Content"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(AuthLoadingState2, { action: "Session expired", onSessionUpdate: ()=>{ throw new Error("Session update failed"); }, __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Session Active Content")))); } function Tooltip({ content, children, position = "top" }) { const [isVisible, setIsVisible] = useState(false); const positionClasses = { top: "bottom-full left-1/2 -translate-x-1/2 mb-2", bottom: "top-full left-1/2 -translate-x-1/2 mt-2", left: "right-full top-1/2 -translate-y-1/2 mr-2", right: "left-full top-1/2 -translate-y-1/2 ml-2" }; return /*#__PURE__*/ React.createElement("div", { className: "relative inline-block", onMouseEnter: ()=>setIsVisible(true), onMouseLeave: ()=>setIsVisible(false), __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, children, isVisible && /*#__PURE__*/ React.createElement("div", { className: `absolute z-10 whitespace-nowrap rounded-lg bg-gray-900 px-3 py-2 text-sm text-white ${positionClasses[position]}`, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, content, /*#__PURE__*/ React.createElement("div", { className: `absolute ${position === "top" ? "top-full left-1/2 -translate-x-1/2 border-t-gray-900" : position === "bottom" ? "bottom-full left-1/2 -translate-x-1/2 border-b-gray-900" : position === "left" ? "left-full top-1/2 -translate-y-1/2 border-l-gray-900" : "right-full top-1/2 -translate-y-1/2 border-r-gray-900"} border-8 border-transparent`, __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }))); } function SocialBoundaryManager({ defaultVisibility = "available", quietHours = { start: "22:00", end: "08:00" }, moodPreferences = {}, isShellMode = false, socialEnergyBudget = 100, autoModeSettings = {}, onUpdateVisibility = ()=>{}, onUpdateQuietHours = ()=>{}, onUpdateMoodPreferences = ()=>{}, onToggleShellMode = ()=>{}, onUpdateAutoMode = ()=>{} }) { const [localShellMode, setLocalShellMode] = useState(isShellMode); const [localQuietHours, setLocalQuietHours] = useState(quietHours); const tooltips = { shellMode: "Quickly pause all non-urgent social interactions and notifications", visibility: { available: "Open to all social interactions and notifications", selective: "Only receive notifications from close friends and important events", minimal: "Limit social interactions to urgent matters only" }, quietHours: "Set your daily rest period. Only emergency notifications will come through", moodPrefs: { energetic: "You're ready for social interaction and collaboration", focused: "You're working and prefer minimal interruptions", tired: "You need rest and minimal social contact" }, energyBudget: "Track and manage your daily social interaction capacity", autoMode: { focus: "Automatically reduce social interruptions during focus sessions", timeBlock: "Change your social availability based on your schedule" } }; const visibilityOptions = [ { value: "available", label: "Always Available", icon: "fa-user" }, { value: "selective", label: "Selective", icon: "fa-user-friends" }, { value: "minimal", label: "Minimal Contact", icon: "fa-user-shield" } ]; const moodOptions = [ { value: "energetic", label: "Energetic", settings: { autoAcceptCalls: true, notificationLevel: "all" } }, { value: "focused", label: "Focused", settings: { autoAcceptCalls: false, notificationLevel: "urgent" } }, { value: "tired", label: "Tired", settings: { autoAcceptCalls: false, notificationLevel: "none" } } ]; const handleShellModeToggle = ()=>{ setLocalShellMode(!localShellMode); onToggleShellMode(!localShellMode); }; const handleQuietHoursChange = (type, value)=>{ const updated = { ...localQuietHours, [type]: value }; setLocalQuietHours(updated); onUpdateQuietHours(updated); }; return /*#__PURE__*/ React.createElement("div", { className: "rounded-xl bg-white p-6 shadow-sm", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 border-b border-gray-100 pb-6", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Social Boundaries"), /*#__PURE__*/ React.createElement(Tooltip, { content: tooltips.shellMode, position: "left", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleShellModeToggle, className: `rounded-full px-4 py-2 transition-colors ${localShellMode ? "bg-red-100 text-red-700" : "bg-gray-100 text-gray-600"}`, __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-shield-alt mr-2`, __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }), "Shell Mode ", localShellMode ? "On" : "Off")))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip, { content: "Choose your default social availability level", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "Default Visibility", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-400", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-2 grid grid-cols-3 gap-3", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, visibilityOptions.map((option)=>/*#__PURE__*/ React.createElement(Tooltip, { key: option.value, content: tooltips.visibility[option.value], __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onUpdateVisibility(option.value), className: `flex items-center justify-center rounded-lg border p-3 ${defaultVisibility === option.value ? "border-[#357AFF] bg-blue-50 text-[#357AFF]" : "border-gray-200 text-gray-600 hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${option.icon} mr-2`, __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }), option.label))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip, { content: tooltips.quietHours, __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, "Quiet Hours", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-400", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex items-center gap-4", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "From"), /*#__PURE__*/ React.createElement("input", { type: "time", value: localQuietHours.start, onChange: (e)=>handleQuietHoursChange("start", e.target.value), className: "rounded-lg border border-gray-200 p-2", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, "To"), /*#__PURE__*/ React.createElement("input", { type: "time", value: localQuietHours.end, onChange: (e)=>handleQuietHoursChange("end", e.target.value), className: "rounded-lg border border-gray-200 p-2", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip, { content: "Adjust notifications based on your current state", __source: { fileName: "", lineNumber: 199, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, "Mood-Based Preferences", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-400", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-2 space-y-3", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, moodOptions.map((mood)=>/*#__PURE__*/ React.createElement(Tooltip, { key: mood.value, content: tooltips.moodPrefs[mood.value], __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onUpdateMoodPreferences(mood), className: `w-full rounded-lg border p-3 text-left ${moodPreferences.currentMood === mood.value ? "border-[#357AFF] bg-blue-50" : "border-gray-200 hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 220, columnNumber: 21 }, __self: this }, mood.label), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 221, columnNumber: 21 }, __self: this }, mood.settings.notificationLevel))))))), /*#__PURE__*/ React.createElement(Tooltip, { content: tooltips.energyBudget, __source: { fileName: "", lineNumber: 231, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, "Social Energy Budget", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-400", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2 rounded-lg bg-gray-50 p-4", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, "Today's Energy"), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-[#357AFF]", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, socialEnergyBudget, "%")), /*#__PURE__*/ React.createElement("div", { className: "mt-2 h-2 rounded-full bg-gray-200", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 rounded-full bg-[#357AFF] transition-all", style: { width: `${socialEnergyBudget}%` }, __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 254, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip, { content: "Configure automatic boundary adjustments", __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, "Automatic Mode Changes", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-400", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-2 space-y-3", __source: { fileName: "", lineNumber: 261, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip, { content: tooltips.autoMode.focus, __source: { fileName: "", lineNumber: 262, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between rounded-lg border border-gray-200 p-3", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, "During Focus Sessions"), /*#__PURE__*/ React.createElement("label", { className: "relative inline-flex cursor-pointer items-center", __source: { fileName: "", lineNumber: 265, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: autoModeSettings.duringFocus, onChange: (e)=>onUpdateAutoMode({ ...autoModeSettings, duringFocus: e.target.checked }), className: "peer sr-only", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-[#357AFF] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-blue-100", __source: { fileName: "", lineNumber: 277, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement(Tooltip, { content: tooltips.autoMode.timeBlock, __source: { fileName: "", lineNumber: 281, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between rounded-lg border border-gray-200 p-3", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, "Time Block Based"), /*#__PURE__*/ React.createElement("label", { className: "relative inline-flex cursor-pointer items-center", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: autoModeSettings.timeBlocks, onChange: (e)=>onUpdateAutoMode({ ...autoModeSettings, timeBlocks: e.target.checked }), className: "peer sr-only", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-[#357AFF] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-blue-100", __source: { fileName: "", lineNumber: 296, columnNumber: 19 }, __self: this })))))))); } function SocialBoundaryManagerStory() { const [mockState, setMockState] = useState({ defaultVisibility: "selective", quietHours: { start: "22:00", end: "08:00" }, moodPreferences: { currentMood: "focused" }, isShellMode: false, socialEnergyBudget: 65, autoModeSettings: { duringFocus: true, timeBlocks: false } }); return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 bg-gray-100 p-8", __source: { fileName: "", lineNumber: 321, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 322, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 323, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement(SocialBoundaryManager, { defaultVisibility: mockState.defaultVisibility, quietHours: mockState.quietHours, moodPreferences: mockState.moodPreferences, isShellMode: mockState.isShellMode, socialEnergyBudget: mockState.socialEnergyBudget, autoModeSettings: mockState.autoModeSettings, onUpdateVisibility: (visibility)=>setMockState({ ...mockState, defaultVisibility: visibility }), onUpdateQuietHours: (hours)=>setMockState({ ...mockState, quietHours: hours }), onUpdateMoodPreferences: (mood)=>setMockState({ ...mockState, moodPreferences: { currentMood: mood.value } }), onToggleShellMode: (mode)=>setMockState({ ...mockState, isShellMode: mode }), onUpdateAutoMode: (settings)=>setMockState({ ...mockState, autoModeSettings: settings }), __source: { fileName: "", lineNumber: 324, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 352, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 353, columnNumber: 9 }, __self: this }, "Shell Mode Active"), /*#__PURE__*/ React.createElement(SocialBoundaryManager, { defaultVisibility: "minimal", quietHours: { start: "21:00", end: "09:00" }, moodPreferences: { currentMood: "tired" }, isShellMode: true, socialEnergyBudget: 20, autoModeSettings: { duringFocus: true, timeBlocks: true }, __source: { fileName: "", lineNumber: 354, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 364, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 365, columnNumber: 9 }, __self: this }, "High Energy State"), /*#__PURE__*/ React.createElement(SocialBoundaryManager, { defaultVisibility: "available", quietHours: { start: "23:00", end: "07:00" }, moodPreferences: { currentMood: "energetic" }, isShellMode: false, socialEnergyBudget: 95, autoModeSettings: { duringFocus: false, timeBlocks: true }, __source: { fileName: "", lineNumber: 366, columnNumber: 9 }, __self: this }))); } function Counter1({ initialCount = 0, incrementBy = 1, buttonText = "Increment", showReset = false, buttonStyle = "primary" }) { const [count, setCount] = useState(initialCount); const handleIncrement = ()=>{ setCount((c)=>c + incrementBy); }; const handleReset = ()=>{ setCount(initialCount); }; const buttonClasses = { primary: "bg-[#357AFF] hover:bg-[#2E69DE]", secondary: "bg-gray-500 hover:bg-gray-600", success: "bg-green-500 hover:bg-green-600" }; return /*#__PURE__*/ React.createElement("div", { className: "inline-block rounded-lg bg-white p-4 shadow-sm", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-xl font-semibold text-gray-900", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "Count: ", count), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleIncrement, className: `inline-block rounded px-4 py-2 text-white transition-colors ${buttonClasses[buttonStyle]}`, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, buttonText), showReset && /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "inline-block rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 transition-colors hover:bg-gray-50", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Reset"))); } function Counter1Story() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 bg-gray-50 p-8", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Default Counter"), /*#__PURE__*/ React.createElement(Counter1, { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Counter with Initial Value"), /*#__PURE__*/ React.createElement(Counter1, { initialCount: 5, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Counter with Custom Increment"), /*#__PURE__*/ React.createElement(Counter1, { incrementBy: 5, buttonText: "Add 5", buttonStyle: "success", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Counter with Reset Button"), /*#__PURE__*/ React.createElement(Counter1, { initialCount: 10, showReset: true, buttonStyle: "secondary", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }))); } function CoreNavigation({ user, currentPath = "/", usageData = {} }) { const [error, setError] = useState(null); const [navPreferences, setNavPreferences] = useState(null); useEffect(()=>{ const fetchPreferences = async ()=>{ try { const response = await fetch("/api/navigation/preferences"); if (!response.ok) throw new Error("Failed to fetch navigation preferences"); const data = await response.json(); setNavPreferences(data); } catch (err) { console.error("Error fetching nav preferences:", err); setError("Could not load navigation preferences"); } }; if (user?.id) { fetchPreferences(); } }, [ user?.id ]); const trackUsage = async (itemKey)=>{ try { const response = await fetch("/api/navigation/track-usage", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ itemKey }) }); if (!response.ok) throw new Error("Failed to track usage"); } catch (err) { console.error("Error tracking usage:", err); } }; const coreItems = [ { key: "dashboard", name: "Dashboard", path: "/dashboard", icon: "fas fa-columns" }, { key: "tasks", name: "Tasks", path: "/tasks", icon: "fas fa-tasks" }, { key: "focus", name: "Focus Mode", path: "/focus", icon: "fas fa-bullseye" }, { key: "rewards", name: "Rewards", path: "/rewards", icon: "fas fa-star" }, { key: "social", name: "Social", path: "/social", icon: "fas fa-users" } ]; const navItems = useMemo(()=>{ return coreItems.map((item)=>({ ...item, usage: usageData[item.key] || 0, pinned: navPreferences?.pinnedItems?.includes(item.key) })); }, [ coreItems, usageData, navPreferences ]); if (error) { return /*#__PURE__*/ React.createElement("div", { className: "text-red-600 p-4", role: "alert", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }), error); } return /*#__PURE__*/ React.createElement("nav", { className: "space-y-1", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.key, href: item.path, onClick: ()=>trackUsage(item.key), className: `flex items-center justify-between px-4 py-2 text-sm font-medium rounded-md ${currentPath === item.path ? "bg-[#357AFF] text-white" : "text-gray-600 hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.icon} w-5 h-5 mr-3`, __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, item.name)), item.pinned && /*#__PURE__*/ React.createElement("i", { className: "fas fa-thumbtack text-xs", __source: { fileName: "", lineNumber: 104, columnNumber: 27 }, __self: this })))); } function CoreNavigationStory() { const mockUser = { id: "123", name: "Test User" }; const mockUsageData = { dashboard: 10, tasks: 5, focus: 3 }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-xs bg-white p-4", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-lg font-bold", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, "Default Navigation"), /*#__PURE__*/ React.createElement(CoreNavigation, { currentPath: "/dashboard", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mb-4 mt-8 text-lg font-bold", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, "Authenticated Navigation"), /*#__PURE__*/ React.createElement(CoreNavigation, { user: mockUser, currentPath: "/tasks", usageData: mockUsageData, __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mb-4 mt-8 text-lg font-bold", __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this }, "With Usage Data"), /*#__PURE__*/ React.createElement(CoreNavigation, { user: mockUser, currentPath: "/focus", usageData: { dashboard: 20, tasks: 15, focus: 8, rewards: 3, social: 1 }, __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this })); } function RewardDisplay({ reward, currentPoints = 0, onRedeem, loading = false, error = null }) { const [redeemStatus, setRedeemStatus] = useState(null); const progress = Math.min(currentPoints / reward.points_required * 100, 100); const canRedeem = currentPoints >= reward.points_required && !reward.is_redeemed; const handleRedeem = async ()=>{ if (!canRedeem) return; try { setRedeemStatus("redeeming"); await onRedeem(reward.id); setRedeemStatus("success"); } catch (err) { setRedeemStatus("error"); console.error(err); } }; return /*#__PURE__*/ React.createElement("div", { className: `relative rounded-lg border bg-white p-6 shadow-sm transition-all duration-300 ${canRedeem ? "border-[#357AFF]" : "border-gray-200"}`, __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start justify-between", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-900", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, reward.name), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-gray-600", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, reward.description)), /*#__PURE__*/ React.createElement("span", { className: "rounded-full bg-gray-100 px-3 py-1 text-sm font-medium", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, reward.points_required, " Points")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Progress"), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, currentPoints, " / ", reward.points_required)), /*#__PURE__*/ React.createElement("div", { className: "h-2 overflow-hidden rounded-full bg-gray-100", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full rounded-full bg-[#357AFF] transition-all duration-500 ease-out", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleRedeem, disabled: !canRedeem || loading || redeemStatus === "redeeming", className: `w-full rounded-lg px-4 py-2 text-sm font-medium transition-all ${canRedeem ? "bg-[#357AFF] text-white hover:bg-blue-600" : "bg-gray-100 text-gray-400"}`, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, loading || redeemStatus === "redeeming" ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }) : reward.is_redeemed ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }), "Redeemed") : "Redeem Reward")), redeemStatus === "success" && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center rounded-lg bg-white bg-opacity-90", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trophy mb-2 text-4xl text-[#357AFF]", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Congratulations!"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "You've earned this reward"))), (error || redeemStatus === "error") && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-center text-sm text-red-600", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-1", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }), error || "Failed to redeem reward"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, ` @keyframes celebrate { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .reward-celebrate { animation: celebrate 0.5s ease-out forwards; } `)); } function RewardDisplayStory() { const [points, setPoints] = useState(80); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const mockRewards = [ { id: "1", name: "Self-Care Day", description: "Take a day off to focus on your wellbeing", points_required: 100, category: "self_care", is_redeemed: false }, { id: "2", name: "Movie Night", description: "Enjoy a movie of your choice", points_required: 50, category: "entertainment", is_redeemed: false }, { id: "3", name: "Productivity Boost", description: "30-minute focused work session", points_required: 75, category: "productivity", is_redeemed: true } ]; const handleRedeem = async (rewardId)=>{ setLoading(true); setError(null); try { await new Promise((resolve)=>setTimeout(resolve, 1500)); // Simulate API call const response = await fetch("/api/rewards/redeem", { method: "POST", body: JSON.stringify({ reward_id: rewardId }) }); if (!response.ok) { throw new Error("Failed to redeem reward"); } setPoints((prev)=>prev - mockRewards.find((r)=>r.id === rewardId).points_required); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-6 p-8", __source: { fileName: "", lineNumber: 172, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 rounded-lg bg-[#357AFF] p-4 text-white", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, "Available Points"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, points)), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, mockRewards.map((reward)=>/*#__PURE__*/ React.createElement(RewardDisplay, { key: reward.id, reward: reward, currentPoints: points, onRedeem: handleRedeem, loading: loading, error: error, __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this })))); } function AuthenticatedLayout({ children }) { const { data: user, loading, error, refetch } = useUser(); const [sessionData, setSessionData] = useState(null); const [refresh, setRefresh] = useState(false); const [navError, setNavError] = useState(null); const renderCount = useRef(0); const initializeLaunchDarkly = useCallback(async ()=>{ try { await fetch("/api/launchdarkly-initialization", { method: "POST", body: JSON.stringify({ userId: user?.id, featureName: "default" }) }); } catch (err) { console.error("Failed to initialize LaunchDarkly:", err); } }, [ user?.id ]); useEffect(()=>{ renderCount.current++; if (renderCount.current > 10) { console.error("Possible render loop detected"); window.location.href = "/error"; } }); useEffect(()=>{ if (user) { initializeLaunchDarkly(); } }, [ user, initializeLaunchDarkly ]); useEffect(()=>{ const checkSession = async ()=>{ try { const response = await fetch("/api/hooks/use-session", { method: "POST" }); if (!response.ok) throw new Error("Session check failed"); const data = await response.json(); if (data) setSessionData(data); } catch (err) { console.error("Failed to check session:", err); setNavError("Session verification failed"); } }; if (user) { checkSession(); const interval = setInterval(checkSession, 60000); return ()=>clearInterval(interval); } }, [ user ]); const handleSessionExtend = async ()=>{ setRefresh(true); try { await fetch("/api/use-session", { method: "POST" }); await refetch(); } catch (err) { console.error("Failed to extend session:", err); setNavError("Failed to extend session"); } finally{ setRefresh(false); } }; if (loading || refresh) { return /*#__PURE__*/ React.createElement(AuthLoadingState, { __source: { fileName: "", lineNumber: 70, columnNumber: 12 }, __self: this }); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Error loading user data. Please try refreshing the page."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "mt-4 px-4 py-2 bg-[#357AFF] text-white rounded hover:bg-[#2E69DE]", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Refresh Page"))); } if (!user && !window.location.pathname.startsWith("/account/")) { window.location.href = "/account/signin"; return null; } return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "flex-1 ml-64", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, navError && /*#__PURE__*/ React.createElement("div", { className: "fixed left-0 right-0 top-0 z-50 bg-red-100 p-4 text-center text-red-700", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, navError, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setNavError(null), className: "ml-2 text-red-900 hover:text-red-700", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }))), sessionData && /*#__PURE__*/ React.createElement(SessionTimeoutWarning, { sessionExpiresAt: sessionData.expires, onExtend: handleSessionExtend, __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)))); } function AuthenticatedLayoutStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 130, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement(AuthenticatedLayout, { __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl bg-white p-6 shadow-sm", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, "Protected Content"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "This content is protected by authentication")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(AuthenticatedLayout, { __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl bg-white p-6 shadow-sm", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "Loading"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Displaying during authentication check")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(AuthenticatedLayout, { __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl bg-white p-6 shadow-sm", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "Displaying error message and refresh button")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-semibold", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, "Session Warning"), /*#__PURE__*/ React.createElement(AuthenticatedLayout, { __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl bg-white p-6 shadow-sm", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "Session Warning"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, "Displaying session timeout warning"))))); } function NavigationSearch({ isOpen = false, onClose, recentSearches = [], navigationItems = [], onNavigate, onSearch, categories = [ "Pages", "Actions", "Settings" ] }) { const [searchTerm, setSearchTerm] = useState(""); const [results, setResults] = useState([]); const [selectedIndex, setSelectedIndex] = useState(0); const searchRef = useRef(null); useEffect(()=>{ const handleKeyPress = (e)=>{ if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); onSearch?.(); } if (e.key === "Escape" && isOpen) { onClose?.(); } }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, [ isOpen, onClose, onSearch ]); useEffect(()=>{ if (isOpen) { searchRef.current?.focus(); } }, [ isOpen ]); useEffect(()=>{ if (!searchTerm) { setResults([]); return; } const fuzzySearch = (items, term)=>{ return items.filter((item)=>item.label.toLowerCase().includes(term.toLowerCase()) || item.keywords?.some((k)=>k.toLowerCase().includes(term.toLowerCase()))); }; const searchResults = categories.map((category)=>({ category, items: fuzzySearch(navigationItems.filter((item)=>item.category === category), searchTerm) })).filter((group)=>group.items.length > 0); setResults(searchResults); setSelectedIndex(0); }, [ searchTerm, navigationItems, categories ]); if (!isOpen) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 overflow-y-auto bg-gray-900 bg-opacity-50 p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-2xl", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl bg-white shadow-2xl", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-gray-200 p-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-3 text-gray-400", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { ref: searchRef, type: "text", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), placeholder: "Search (⌘K)", className: "w-full bg-transparent text-lg outline-none placeholder:text-gray-400", "aria-label": "Search navigation", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("kbd", { className: "ml-2 rounded border border-gray-200 bg-gray-100 px-2 py-1 text-xs text-gray-500", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "ESC"))), /*#__PURE__*/ React.createElement("div", { className: "max-h-[60vh] overflow-y-auto p-2", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, searchTerm === "" && recentSearches.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-2 px-3 text-sm font-medium text-gray-500", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, "Recent Searches"), recentSearches.map((item, index)=>/*#__PURE__*/ React.createElement("button", { key: item.id, onClick: ()=>onNavigate?.(item.path), className: "flex w-full items-center rounded-lg px-3 py-2 text-left hover:bg-gray-100", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history mr-3 text-gray-400", __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 103, columnNumber: 21 }, __self: this }, item.label)))), results.map((group, groupIndex)=>/*#__PURE__*/ React.createElement("div", { key: group.category, className: "mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-2 px-3 text-sm font-medium text-gray-500", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, group.category), group.items.map((item, itemIndex)=>/*#__PURE__*/ React.createElement("button", { key: item.id, onClick: ()=>onNavigate?.(item.path), className: `flex w-full items-center justify-between rounded-lg px-3 py-2 text-left ${selectedIndex === itemIndex ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.icon} mr-3 text-gray-400`, __source: { fileName: "", lineNumber: 125, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 126, columnNumber: 23 }, __self: this }, item.label)), item.shortcut && /*#__PURE__*/ React.createElement("kbd", { className: "rounded border border-gray-200 bg-gray-100 px-2 py-1 text-xs text-gray-500", __source: { fileName: "", lineNumber: 129, columnNumber: 23 }, __self: this }, item.shortcut))))))))); } function NavigationSearchStory() { const [isOpen, setIsOpen] = useState(false); const mockNavigationItems = [ { id: "1", label: "Dashboard", path: "/dashboard", icon: "fas fa-columns", category: "Pages", shortcut: "⌘D", keywords: [ "home", "overview" ] }, { id: "2", label: "Tasks", path: "/tasks", icon: "fas fa-tasks", category: "Pages", shortcut: "⌘T", keywords: [ "todo", "list" ] }, { id: "3", label: "Settings", path: "/settings", icon: "fas fa-cog", category: "Settings", shortcut: "⌘,", keywords: [ "preferences", "config" ] }, { id: "4", label: "Create New Task", path: "/tasks/new", icon: "fas fa-plus", category: "Actions", shortcut: "⌘N", keywords: [ "add", "new" ] } ]; const mockRecentSearches = [ { id: "1", label: "Profile Settings", path: "/settings/profile" }, { id: "2", label: "Task List", path: "/tasks" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 192, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "rounded-lg bg-[#357AFF] px-4 py-2 text-white", __source: { fileName: "", lineNumber: 193, columnNumber: 7 }, __self: this }, "Open Search (⌘K)"), /*#__PURE__*/ React.createElement(NavigationSearch, { isOpen: isOpen, onClose: ()=>setIsOpen(false), onSearch: ()=>setIsOpen(true), navigationItems: mockNavigationItems, recentSearches: mockRecentSearches, onNavigate: (path)=>{ console.log("Navigating to:", path); setIsOpen(false); }, __source: { fileName: "", lineNumber: 200, columnNumber: 7 }, __self: this })); } function LearningDashboard({ attentionData = [], energyLevels = [], learningMaterials = [], onPlayAudio = ()=>{}, onPause = ()=>{}, onComplete = ()=>{}, isLoading = false, error = null }) { const [selectedMaterial, setSelectedMaterial] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const learningTooltips = { attention: "Your focus patterns throughout the day", energy: "Your energy levels for optimal learning times", materials: "Personalized learning content recommendations", optimal: "Best time to schedule your learning sessions", progress: "Track your learning progress and engagement" }; const getOptimalStudyTime = ()=>{ if (!energyLevels.length) return null; const highEnergyTimes = energyLevels.filter((entry)=>entry.level >= 7).map((entry)=>entry.time); return highEnergyTimes[0] || null; }; const optimalTime = getOptimalStudyTime(); if (isLoading) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-white p-6 shadow-sm", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex h-64 items-center justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-[#357AFF] border-t-transparent", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }))); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-50 p-4 text-center text-red-600", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mb-2 text-xl", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, error)); } return /*#__PURE__*/ React.createElement("div", { className: "space-y-6 rounded-lg bg-white p-6 shadow-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-gray-200 pb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Learning Dashboard"), optimalTime && /*#__PURE__*/ React.createElement(Tooltip1, { content: learningTooltips.optimal, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2 text-[#357AFF]", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }), "Optimal study time today: ", optimalTime))), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 md:grid-cols-2", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Tooltip1, { content: learningTooltips.attention, __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg border border-gray-200 p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 font-medium text-gray-900", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Attention Patterns"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, attentionData.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, entry.time), /*#__PURE__*/ React.createElement("div", { className: "h-2 w-32 overflow-hidden rounded-full bg-gray-100", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full rounded-full bg-[#357AFF] transition-all", style: { width: `${entry.focus * 10}%` }, __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }))))))), /*#__PURE__*/ React.createElement(Tooltip1, { content: learningTooltips.energy, __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg border border-gray-200 p-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 font-medium text-gray-900", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Energy Levels"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, energyLevels.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, entry.time), /*#__PURE__*/ React.createElement("div", { className: "h-2 w-32 overflow-hidden rounded-full bg-gray-100", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full rounded-full bg-green-500 transition-all", style: { width: `${entry.level * 10}%` }, __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this })))))))), /*#__PURE__*/ React.createElement(Tooltip1, { content: learningTooltips.materials, __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg border border-gray-200 p-4", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 font-medium text-gray-900", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Recommended Materials"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, learningMaterials.map((material)=>/*#__PURE__*/ React.createElement("div", { key: material.id, className: "rounded-lg border border-gray-100 bg-white p-4 shadow-sm transition-all hover:shadow-md", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "mb-2 font-medium text-gray-900", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, material.title), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-sm text-gray-600", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, material.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedMaterial(material.id); setIsPlaying(!isPlaying); if (!isPlaying) { onPlayAudio(material.id); } else { onPause(material.id); } }, className: "inline-flex items-center rounded-lg bg-[#357AFF] px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-600", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isPlaying && selectedMaterial === material.id ? "pause" : "play"} mr-1`, __source: { fileName: "", lineNumber: 139, columnNumber: 21 }, __self: this }), isPlaying && selectedMaterial === material.id ? "Pause" : "Listen"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onComplete(material.id), className: "inline-flex items-center rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200", __source: { fileName: "", lineNumber: 146, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-1", __source: { fileName: "", lineNumber: 150, columnNumber: 21 }, __self: this }), "Complete")))))))); } function StrategyCard({ strategy, onLike, isLiked }) { const [liking, setLiking] = useState(false); const [error, setError] = useState(null); const handleLike = async ()=>{ if (liking) return; setLiking(true); setError(null); try { const response = await fetch("/api/strategies/like", { method: "POST", body: JSON.stringify({ strategyId: strategy.id }) }); if (!response.ok) { throw new Error("Failed to like strategy"); } onLike?.(); } catch (err) { console.error(err); setError("Could not like the strategy right now"); } finally{ setLiking(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 max-w-[400px]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl font-semibold text-[#2C3E50]", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, strategy.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#7F8C8D] text-sm mt-1", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Shared by ", strategy.creator?.name || "Anonymous")), /*#__PURE__*/ React.createElement("span", { className: "text-[#7F8C8D] text-sm", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, strategy.category)), /*#__PURE__*/ React.createElement("p", { className: "text-[#34495E] mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, strategy.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, strategy.tags?.map((tag, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "bg-[#ECF0F1] text-[#7F8C8D] text-xs px-2 py-1 rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, tag))), /*#__PURE__*/ React.createElement("button", { onClick: handleLike, disabled: liking || isLiked, className: `flex items-center gap-2 px-4 py-2 rounded transition-colors ${isLiked ? "bg-[#E8F6F3] text-[#27AE60]" : "bg-white hover:bg-[#F5F6F7] text-[#7F8C8D]"}`, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-${isLiked ? "solid" : "regular"} fa-heart`, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, strategy.likes_count || 0))), error && /*#__PURE__*/ React.createElement("p", { className: "text-[#E74C3C] text-sm mt-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, error)); } function StrategyCardStory() { const [likes, setLikes] = useState(42); const mockStrategy = { id: "123", title: "Morning Productivity Routine", description: "Start your day with a 10-minute meditation followed by journaling. This helps create mental clarity and sets positive intentions for the day ahead.", category: "routine", tags: [ "morning", "meditation", "productivity" ], likes_count: likes, creator: { name: "Jane Smith" } }; const mockLikedStrategy = { ...mockStrategy, id: "456", title: "Evening Wind-Down Routine", description: "A calming routine to help transition from work mode to rest mode. Includes gentle stretching and mindful breathing exercises.", tags: [ "evening", "relaxation", "sleep" ] }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#F5F6F7] flex flex-col gap-6", __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StrategyCard, { strategy: mockStrategy, onLike: ()=>setLikes((prev)=>prev + 1), __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StrategyCard, { strategy: mockLikedStrategy, isLiked: true, onLike: ()=>{}, __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this })); } function MainNavigation({ activeRoute = "/dashboard", user = null, notificationCount = 0, onSearch = ()=>{}, onNavigate = ()=>{} }) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [showUserMenu, setShowUserMenu] = useState(false); const navSections = [ { label: "Dashboard", items: [ { icon: "fas fa-columns", label: "Overview", path: "/dashboard" }, { icon: "fas fa-chart-line", label: "Analytics", path: "/dashboard/analytics" } ] }, { label: "Tasks & Focus", items: [ { icon: "fas fa-tasks", label: "Tasks", path: "/tasks" }, { icon: "fas fa-bullseye", label: "Focus Mode", path: "/focus" }, { icon: "fas fa-clock", label: "Timer", path: "/timer" } ] }, { label: "Journal", items: [ { icon: "fas fa-book", label: "Entries", path: "/journal" }, { icon: "fas fa-lightbulb", label: "Reflections", path: "/journal/reflections" } ] }, { label: "Games & Rewards", items: [ { icon: "fas fa-gamepad", label: "Games", path: "/games" }, { icon: "fas fa-trophy", label: "Rewards", path: "/rewards" }, { icon: "fas fa-star", label: "Achievements", path: "/achievements" } ] }, { label: "Social", items: [ { icon: "fas fa-users", label: "Community", path: "/social" }, { icon: "fas fa-comments", label: "Chat", path: "/social/chat" }, { icon: "fas fa-user-friends", label: "Friends", path: "/social/friends" } ] }, { label: "Settings", items: [ { icon: "fas fa-cog", label: "General", path: "/settings" }, { icon: "fas fa-user", label: "Profile", path: "/settings/profile" }, { icon: "fas fa-bell", label: "Notifications", path: "/settings/notifications" } ] } ]; const handleSearch = (e)=>{ e.preventDefault(); onSearch(searchQuery); }; const handleNavigation = (path)=>{ onNavigate(path); }; return /*#__PURE__*/ React.createElement("nav", { className: "sticky top-0 z-20 w-full border-b bg-white", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-7xl px-4", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex h-16 items-center justify-between", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleNavigation("/"), className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(SailfLogo, { __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex md:items-center md:gap-6", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, navSections.map((section)=>/*#__PURE__*/ React.createElement("div", { key: section.label, className: "relative group", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-[#357AFF]", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, section.items[0]?.icon && /*#__PURE__*/ React.createElement("i", { className: `${section.items[0].icon} text-lg`, __source: { fileName: "", lineNumber: 104, columnNumber: 21 }, __self: this }), section.label, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-xs ml-1", __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 mt-2 w-48 invisible group-hover:visible bg-white rounded-lg shadow-lg py-2", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, section.items.map((item)=>/*#__PURE__*/ React.createElement("button", { key: item.path, onClick: ()=>handleNavigation(item.path), className: `flex w-full items-center gap-2 px-4 py-2 text-sm ${activeRoute === item.path ? "bg-blue-50 text-[#357AFF] font-semibold" : "text-gray-600 hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 111, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.icon} text-lg`, __source: { fileName: "", lineNumber: 120, columnNumber: 23 }, __self: this }), item.label)))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "hidden items-center md:flex", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", placeholder: "Search...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "rounded-lg border border-gray-200 px-4 py-2 focus:border-[#357AFF] focus:outline-none", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "relative rounded-full p-2 hover:bg-gray-100", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-lg text-gray-600", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }), notificationCount > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, notificationCount)), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUserMenu(!showUserMenu), className: "flex items-center gap-2 rounded-full hover:bg-gray-100", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user?.avatar || "https://via.placeholder.com/32", alt: "User avatar", className: "h-8 w-8 rounded-full", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-xs text-gray-600", __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this })), showUserMenu && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 rounded-lg bg-white py-2 shadow-lg", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleNavigation("/profile"), className: "block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleNavigation("/settings"), className: "block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 173, columnNumber: 19 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("hr", { className: "my-1", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleNavigation("/account/logout"), className: "block w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-gray-100", __source: { fileName: "", lineNumber: 180, columnNumber: 19 }, __self: this }, "Sign Out"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "rounded-lg p-2 hover:bg-gray-100 md:hidden", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isMenuOpen ? "times" : "bars"} text-lg text-gray-600`, __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this })))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-100 py-4 md:hidden", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "mb-4", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", placeholder: "Search...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "w-full rounded-lg border border-gray-200 px-4 py-2 focus:border-[#357AFF] focus:outline-none", __source: { fileName: "