learngraph 0.4.0 → 0.7.0

package/dist/esm/components/LearningPathView.js

@@ -0,0 +1,316 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LearningPathView Component
+ *
+ * Displays a learning path with progress tracking.
+ *
+ * @packageDocumentation
+ */
+import { useMemo } from 'react';
+import { DEFAULT_BLOOM_COLORS, STATUS_COLORS } from './types.js';
+const ProgressBar = ({ steps }) => {
+    const completed = steps.filter((s) => s.status === 'completed').length;
+    const percentage = Math.round((completed / steps.length) * 100);
+    const containerStyle = {
+        marginBottom: '24px',
+    };
+    const labelStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        fontSize: '14px',
+        marginBottom: '8px',
+        color: '#374151',
+    };
+    const barContainerStyle = {
+        height: '12px',
+        backgroundColor: '#e5e7eb',
+        borderRadius: '6px',
+        overflow: 'hidden',
+    };
+    const barStyle = {
+        height: '100%',
+        width: `${percentage}%`,
+        backgroundColor: STATUS_COLORS.mastered,
+        borderRadius: '6px',
+        transition: 'width 0.3s ease',
+    };
+    return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: labelStyle, children: [_jsxs("span", { children: [_jsx("strong", { children: completed }), " of ", _jsx("strong", { children: steps.length }), " skills completed"] }), _jsxs("span", { style: { fontWeight: 600 }, children: [percentage, "%"] })] }), _jsx("div", { style: barContainerStyle, children: _jsx("div", { style: barStyle }) })] }));
+};
+const TimelineStep = ({ step, isLast, showTime, onStepClick, onStartStep, }) => {
+    const { skill, stepNumber, status, isPrerequisite, estimatedMinutes } = step;
+    const statusColors = {
+        completed: STATUS_COLORS.mastered,
+        current: STATUS_COLORS.available,
+        upcoming: '#9ca3af',
+        locked: STATUS_COLORS.locked,
+    };
+    const containerStyle = {
+        display: 'flex',
+        position: 'relative',
+    };
+    const indicatorContainerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        marginRight: '16px',
+    };
+    const circleStyle = {
+        width: '32px',
+        height: '32px',
+        borderRadius: '50%',
+        backgroundColor: status === 'completed' ? statusColors[status] : 'transparent',
+        border: `3px solid ${statusColors[status]}`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '14px',
+        fontWeight: 600,
+        color: status === 'completed' ? '#ffffff' : statusColors[status],
+        zIndex: 1,
+    };
+    const lineStyle = {
+        width: '3px',
+        flex: 1,
+        backgroundColor: status === 'completed' ? statusColors.completed : '#e5e7eb',
+        minHeight: '24px',
+        display: isLast ? 'none' : 'block',
+    };
+    const contentStyle = {
+        flex: 1,
+        paddingBottom: isLast ? 0 : '24px',
+        cursor: onStepClick ? 'pointer' : 'default',
+    };
+    const cardStyle = {
+        backgroundColor: status === 'current' ? '#eff6ff' : '#ffffff',
+        border: `1px solid ${status === 'current' ? '#bfdbfe' : '#e5e7eb'}`,
+        borderRadius: '8px',
+        padding: '12px 16px',
+        transition: 'box-shadow 0.2s ease',
+    };
+    const headerStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '4px',
+    };
+    const titleStyle = {
+        fontSize: '14px',
+        fontWeight: 600,
+        color: status === 'locked' ? '#9ca3af' : '#1f2937',
+        margin: 0,
+    };
+    const badgeStyle = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '2px 8px',
+        borderRadius: '4px',
+        fontSize: '11px',
+        fontWeight: 500,
+        textTransform: 'capitalize',
+        backgroundColor: DEFAULT_BLOOM_COLORS[skill.bloomLevel],
+        color: '#ffffff',
+    };
+    const metaStyle = {
+        display: 'flex',
+        gap: '12px',
+        fontSize: '12px',
+        color: '#6b7280',
+        marginTop: '4px',
+    };
+    const buttonStyle = {
+        marginTop: '8px',
+        padding: '6px 12px',
+        backgroundColor: '#3b82f6',
+        color: '#ffffff',
+        border: 'none',
+        borderRadius: '6px',
+        fontSize: '12px',
+        fontWeight: 500,
+        cursor: 'pointer',
+    };
+    return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: indicatorContainerStyle, children: [_jsx("div", { style: circleStyle, children: status === 'completed' ? '✓' : stepNumber }), _jsx("div", { style: lineStyle })] }), _jsx("div", { style: contentStyle, onClick: () => onStepClick?.(step), children: _jsxs("div", { style: cardStyle, children: [_jsxs("div", { style: headerStyle, children: [_jsx("h4", { style: titleStyle, children: skill.name }), _jsx("span", { style: badgeStyle, children: skill.bloomLevel })] }), _jsxs("div", { style: metaStyle, children: [showTime && _jsxs("span", { children: [estimatedMinutes, " min"] }), isPrerequisite && (_jsx("span", { style: { color: '#f59e0b' }, children: "Prerequisite" }))] }), status === 'current' && onStartStep && (_jsx("button", { style: buttonStyle, onClick: (e) => {
+                                e.stopPropagation();
+                                onStartStep(step);
+                            }, children: "Start Now" }))] }) })] }));
+};
+const ListStep = ({ step, showTime, onStepClick, onStartStep, }) => {
+    const { skill, stepNumber, status, isPrerequisite, estimatedMinutes } = step;
+    const statusColors = {
+        completed: STATUS_COLORS.mastered,
+        current: STATUS_COLORS.available,
+        upcoming: '#9ca3af',
+        locked: STATUS_COLORS.locked,
+    };
+    const containerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '12px',
+        backgroundColor: status === 'current' ? '#eff6ff' : '#ffffff',
+        border: `1px solid ${status === 'current' ? '#bfdbfe' : '#e5e7eb'}`,
+        borderRadius: '8px',
+        marginBottom: '8px',
+        cursor: onStepClick ? 'pointer' : 'default',
+    };
+    const numberStyle = {
+        width: '28px',
+        height: '28px',
+        borderRadius: '50%',
+        backgroundColor: status === 'completed' ? statusColors[status] : 'transparent',
+        border: `2px solid ${statusColors[status]}`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '12px',
+        fontWeight: 600,
+        color: status === 'completed' ? '#ffffff' : statusColors[status],
+        marginRight: '12px',
+        flexShrink: 0,
+    };
+    const contentStyle = {
+        flex: 1,
+    };
+    const titleStyle = {
+        fontSize: '14px',
+        fontWeight: 500,
+        color: status === 'locked' ? '#9ca3af' : '#1f2937',
+        margin: 0,
+    };
+    const metaStyle = {
+        display: 'flex',
+        gap: '8px',
+        fontSize: '11px',
+        color: '#6b7280',
+        marginTop: '2px',
+    };
+    const buttonStyle = {
+        padding: '4px 10px',
+        backgroundColor: '#3b82f6',
+        color: '#ffffff',
+        border: 'none',
+        borderRadius: '4px',
+        fontSize: '11px',
+        fontWeight: 500,
+        cursor: 'pointer',
+        marginLeft: '12px',
+    };
+    return (_jsxs("div", { style: containerStyle, onClick: () => onStepClick?.(step), children: [_jsx("div", { style: numberStyle, children: status === 'completed' ? '✓' : stepNumber }), _jsxs("div", { style: contentStyle, children: [_jsx("div", { style: titleStyle, children: skill.name }), _jsxs("div", { style: metaStyle, children: [_jsx("span", { style: {
+                                    textTransform: 'capitalize',
+                                    color: DEFAULT_BLOOM_COLORS[skill.bloomLevel],
+                                }, children: skill.bloomLevel }), showTime && _jsxs("span", { children: [estimatedMinutes, " min"] }), isPrerequisite && _jsx("span", { style: { color: '#f59e0b' }, children: "prereq" })] })] }), status === 'current' && onStartStep && (_jsx("button", { style: buttonStyle, onClick: (e) => {
+                    e.stopPropagation();
+                    onStartStep(step);
+                }, children: "Start" }))] }));
+};
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Component
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * LearningPathView Component
+ *
+ * Displays a learning path with progress tracking and step navigation.
+ *
+ * @example
+ * ```tsx
+ * import { LearningPathView } from 'learngraph/components';
+ *
+ * function PathToAlgebra() {
+ *   const { steps } = useLearningPath({
+ *     targetSkillId: 'algebra-101',
+ *   });
+ *
+ *   return (
+ *     <LearningPathView
+ *       steps={steps}
+ *       targetSkillName="Algebra Basics"
+ *       viewMode="timeline"
+ *       onStepClick={(step) => console.log('Selected:', step.skill.name)}
+ *       onStartStep={(step) => startLesson(step.skill.id)}
+ *       showProgress
+ *       showTimeEstimates
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const LearningPathView = ({ steps, targetSkillName, currentStepIndex: _currentStepIndex, viewMode = 'timeline', onStepClick, onStartStep, showTimeEstimates = true, showProgress = true, className, style, }) => {
+    // _currentStepIndex is available for future use
+    void _currentStepIndex;
+    const totalMinutes = useMemo(() => steps.reduce((sum, step) => sum + step.estimatedMinutes, 0), [steps]);
+    const containerStyle = {
+        ...style,
+    };
+    const headerStyle = {
+        marginBottom: '16px',
+    };
+    const titleStyle = {
+        fontSize: '20px',
+        fontWeight: 600,
+        color: '#1f2937',
+        margin: 0,
+    };
+    const subtitleStyle = {
+        fontSize: '14px',
+        color: '#6b7280',
+        marginTop: '4px',
+    };
+    if (steps.length === 0) {
+        return (_jsx("div", { className: className, style: containerStyle, children: _jsxs("div", { style: headerStyle, children: [_jsxs("h2", { style: titleStyle, children: ["Path to ", targetSkillName] }), _jsx("p", { style: subtitleStyle, children: "No prerequisites needed!" })] }) }));
+    }
+    return (_jsxs("div", { className: className, style: containerStyle, children: [_jsxs("div", { style: headerStyle, children: [_jsxs("h2", { style: titleStyle, children: ["Path to ", targetSkillName] }), _jsxs("p", { style: subtitleStyle, children: [steps.length, " skills \u2022 ", totalMinutes, " minutes estimated"] })] }), showProgress && _jsx(ProgressBar, { steps: steps }), viewMode === 'timeline' && (_jsx("div", { children: steps.map((step, index) => (_jsx(TimelineStep, { step: step, isLast: index === steps.length - 1, showTime: showTimeEstimates, onStepClick: onStepClick, onStartStep: onStartStep }, String(step.skill.id)))) })), viewMode === 'list' && (_jsx("div", { children: steps.map((step) => (_jsx(ListStep, { step: step, showTime: showTimeEstimates, onStepClick: onStepClick, onStartStep: onStartStep }, String(step.skill.id)))) })), viewMode === 'cards' && (_jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+                    gap: '12px',
+                }, children: steps.map((step) => (_jsxs("div", { style: {
+                        padding: '16px',
+                        backgroundColor: step.status === 'current' ? '#eff6ff' : '#ffffff',
+                        border: `1px solid ${step.status === 'current' ? '#bfdbfe' : '#e5e7eb'}`,
+                        borderRadius: '8px',
+                        cursor: onStepClick ? 'pointer' : 'default',
+                    }, onClick: () => onStepClick?.(step), children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginBottom: '8px',
+                            }, children: [_jsx("span", { style: {
+                                        width: '24px',
+                                        height: '24px',
+                                        borderRadius: '50%',
+                                        backgroundColor: step.status === 'completed'
+                                            ? STATUS_COLORS.mastered
+                                            : '#e5e7eb',
+                                        color: step.status === 'completed' ? '#ffffff' : '#6b7280',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        fontSize: '12px',
+                                        fontWeight: 600,
+                                    }, children: step.status === 'completed' ? '✓' : step.stepNumber }), _jsx("span", { style: {
+                                        fontSize: '11px',
+                                        padding: '2px 6px',
+                                        backgroundColor: DEFAULT_BLOOM_COLORS[step.skill.bloomLevel],
+                                        color: '#ffffff',
+                                        borderRadius: '4px',
+                                        textTransform: 'capitalize',
+                                    }, children: step.skill.bloomLevel })] }), _jsx("h4", { style: {
+                                fontSize: '14px',
+                                fontWeight: 600,
+                                color: '#1f2937',
+                                margin: '0 0 4px 0',
+                            }, children: step.skill.name }), _jsx("div", { style: { fontSize: '12px', color: '#6b7280' }, children: showTimeEstimates && _jsxs("span", { children: [step.estimatedMinutes, " min"] }) }), step.status === 'current' && onStartStep && (_jsx("button", { style: {
+                                marginTop: '12px',
+                                width: '100%',
+                                padding: '8px',
+                                backgroundColor: '#3b82f6',
+                                color: '#ffffff',
+                                border: 'none',
+                                borderRadius: '6px',
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                cursor: 'pointer',
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                                onStartStep(step);
+                            }, children: "Start Now" }))] }, String(step.skill.id)))) }))] }));
+};
+export default LearningPathView;
+//# sourceMappingURL=LearningPathView.js.map

package/dist/esm/components/LearningPathView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearningPathView.js","sourceRoot":"","sources":["../../../src/components/LearningPathView.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAA+B,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAUjE,MAAM,WAAW,GAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,MAAM,CAAC;IACvE,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC;IAEhE,MAAM,cAAc,GAAkB;QACpC,YAAY,EAAE,MAAM;KACrB,CAAC;IAEF,MAAM,UAAU,GAAkB;QAChC,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,eAAe;QAC/B,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,SAAS;KACjB,CAAC;IAEF,MAAM,iBAAiB,GAAkB;QACvC,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,QAAQ;KACnB,CAAC;IAEF,MAAM,QAAQ,GAAkB;QAC9B,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,GAAG,UAAU,GAAG;QACvB,eAAe,EAAE,aAAa,CAAC,QAAQ;QACvC,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,iBAAiB;KAC9B,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,cAAc,aACxB,eAAK,KAAK,EAAE,UAAU,aACpB,2BACE,2BAAS,SAAS,GAAU,UAAI,2BAAS,KAAK,CAAC,MAAM,GAAU,yBAE1D,EACP,gBAAM,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAG,UAAU,SAAS,IAClD,EACN,cAAK,KAAK,EAAE,iBAAiB,YAC3B,cAAK,KAAK,EAAE,QAAQ,GAAI,GACpB,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,YAAY,GAA0B,CAAC,EAC3C,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAE7E,MAAM,YAAY,GAAG;QACnB,SAAS,EAAE,aAAa,CAAC,QAAQ;QACjC,OAAO,EAAE,aAAa,CAAC,SAAS;QAChC,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,aAAa,CAAC,MAAM;KAC7B,CAAC;IAEF,MAAM,cAAc,GAAkB;QACpC,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;KACrB,CAAC;IAEF,MAAM,uBAAuB,GAAkB;QAC7C,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,QAAQ;QACpB,WAAW,EAAE,MAAM;KACpB,CAAC;IAEF,MAAM,WAAW,GAAkB;QACjC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,eAAe,EACb,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa;QAC/D,MAAM,EAAE,aAAa,YAAY,CAAC,MAAM,CAAC,EAAE;QAC3C,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC;QAChE,MAAM,EAAE,CAAC;KACV,CAAC;IAEF,MAAM,SAAS,GAAkB;QAC/B,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,CAAC;QACP,eAAe,EAAE,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC5E,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KACnC,CAAC;IAEF,MAAM,YAAY,GAAkB;QAClC,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;QAClC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KAC5C,CAAC;IAEF,MAAM,SAAS,GAAkB;QAC/B,eAAe,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC7D,MAAM,EAAE,aAAa,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;QACnE,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,sBAAsB;KACnC,CAAC;IAEF,MAAM,WAAW,GAAkB;QACjC,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,eAAe;QAC/B,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,KAAK;KACpB,CAAC;IAEF,MAAM,UAAU,GAAkB;QAChC,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAClD,MAAM,EAAE,CAAC;KACV,CAAC;IAEF,MAAM,UAAU,GAAkB;QAChC,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,aAAa,EAAE,YAAY;QAC3B,eAAe,EAAE,oBAAoB,CAAC,KAAK,CAAC,UAAU,CAAC;QACvD,KAAK,EAAE,SAAS;KACjB,CAAC;IAEF,MAAM,SAAS,GAAkB;QAC/B,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE,KAAK;KACjB,CAAC;IAEF,MAAM,WAAW,GAAkB;QACjC,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,UAAU;QACnB,eAAe,EAAE,SAAS;QAC1B,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,SAAS;KAClB,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,cAAc,aACxB,eAAK,KAAK,EAAE,uBAAuB,aACjC,cAAK,KAAK,EAAE,WAAW,YACpB,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,GACtC,EACN,cAAK,KAAK,EAAE,SAAS,GAAI,IACrB,EACN,cAAK,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,YAC1D,eAAK,KAAK,EAAE,SAAS,aACnB,eAAK,KAAK,EAAE,WAAW,aACrB,aAAI,KAAK,EAAE,UAAU,YAAG,KAAK,CAAC,IAAI,GAAM,EACxC,eAAM,KAAK,EAAE,UAAU,YAAG,KAAK,CAAC,UAAU,GAAQ,IAC9C,EACN,eAAK,KAAK,EAAE,SAAS,aAClB,QAAQ,IAAI,2BAAO,gBAAgB,YAAY,EAC/C,cAAc,IAAI,CACjB,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,6BAAqB,CACvD,IACG,EACL,MAAM,KAAK,SAAS,IAAI,WAAW,IAAI,CACtC,iBACE,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gCACb,CAAC,CAAC,eAAe,EAAE,CAAC;gCACpB,WAAW,CAAC,IAAI,CAAC,CAAC;4BACpB,CAAC,0BAGM,CACV,IACG,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AASF,MAAM,QAAQ,GAAsB,CAAC,EACnC,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAE7E,MAAM,YAAY,GAAG;QACnB,SAAS,EAAE,aAAa,CAAC,QAAQ;QACjC,OAAO,EAAE,aAAa,CAAC,SAAS;QAChC,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,aAAa,CAAC,MAAM;KAC7B,CAAC;IAEF,MAAM,cAAc,GAAkB;QACpC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,MAAM;QACf,eAAe,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC7D,MAAM,EAAE,aAAa,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;QACnE,YAAY,EAAE,KAAK;QACnB,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KAC5C,CAAC;IAEF,MAAM,WAAW,GAAkB;QACjC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,eAAe,EACb,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa;QAC/D,MAAM,EAAE,aAAa,YAAY,CAAC,MAAM,CAAC,EAAE;QAC3C,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC;QAChE,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,CAAC;KACd,CAAC;IAEF,MAAM,YAAY,GAAkB;QAClC,IAAI,EAAE,CAAC;KACR,CAAC;IAEF,MAAM,UAAU,GAAkB;QAChC,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAClD,MAAM,EAAE,CAAC;KACV,CAAC;IAEF,MAAM,SAAS,GAAkB;QAC/B,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,KAAK;QACV,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE,KAAK;KACjB,CAAC;IAEF,MAAM,WAAW,GAAkB;QACjC,OAAO,EAAE,UAAU;QACnB,eAAe,EAAE,SAAS;QAC1B,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,MAAM;KACnB,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,aAC5D,cAAK,KAAK,EAAE,WAAW,YACpB,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,GACtC,EACN,eAAK,KAAK,EAAE,YAAY,aACtB,cAAK,KAAK,EAAE,UAAU,YAAG,KAAK,CAAC,IAAI,GAAO,EAC1C,eAAK,KAAK,EAAE,SAAS,aACnB,eACE,KAAK,EAAE;oCACL,aAAa,EAAE,YAAY;oCAC3B,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC,UAAU,CAAC;iCAC9C,YAEA,KAAK,CAAC,UAAU,GACZ,EACN,QAAQ,IAAI,2BAAO,gBAAgB,YAAY,EAC/C,cAAc,IAAI,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,uBAAe,IAC/D,IACF,EACL,MAAM,KAAK,SAAS,IAAI,WAAW,IAAI,CACtC,iBACE,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,WAAW,CAAC,IAAI,CAAC,CAAC;gBACpB,CAAC,sBAGM,CACV,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,iBAAiB;AACjB,gFAAgF;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAC1D,KAAK,EACL,eAAe,EACf,gBAAgB,EAAE,iBAAiB,EACnC,QAAQ,GAAG,UAAU,EACrB,WAAW,EACX,WAAW,EACX,iBAAiB,GAAG,IAAI,EACxB,YAAY,GAAG,IAAI,EACnB,SAAS,EACT,KAAK,GACN,EAAE,EAAE;IACH,gDAAgD;IAChD,KAAK,iBAAiB,CAAC;IACvB,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,EACjE,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,cAAc,GAAkB;QACpC,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,WAAW,GAAkB;QACjC,YAAY,EAAE,MAAM;KACrB,CAAC;IAEF,MAAM,UAAU,GAAkB;QAChC,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,CAAC;KACV,CAAC;IAEF,MAAM,aAAa,GAAkB;QACnC,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE,KAAK;KACjB,CAAC;IAEF,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,YAC9C,eAAK,KAAK,EAAE,WAAW,aACrB,cAAI,KAAK,EAAE,UAAU,yBAAW,eAAe,IAAM,EACrD,YAAG,KAAK,EAAE,aAAa,yCAA8B,IACjD,GACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,aAC9C,eAAK,KAAK,EAAE,WAAW,aACrB,cAAI,KAAK,EAAE,UAAU,yBAAW,eAAe,IAAM,EACrD,aAAG,KAAK,EAAE,aAAa,aACpB,KAAK,CAAC,MAAM,qBAAY,YAAY,0BACnC,IACA,EAEL,YAAY,IAAI,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI,EAE7C,QAAQ,KAAK,UAAU,IAAI,CAC1B,wBACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,KAAC,YAAY,IAEX,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAClC,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,IALnB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAM1B,CACH,CAAC,GACE,CACP,EAEA,QAAQ,KAAK,MAAM,IAAI,CACtB,wBACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,IAJnB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAK1B,CACH,CAAC,GACE,CACP,EAEA,QAAQ,KAAK,OAAO,IAAI,CACvB,cACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,mBAAmB,EAAE,uCAAuC;oBAC5D,GAAG,EAAE,MAAM;iBACZ,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAEE,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,eAAe,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;wBAClE,MAAM,EAAE,aAAa,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;wBACxE,YAAY,EAAE,KAAK;wBACnB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;qBAC5C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,aAElC,eACE,KAAK,EAAE;gCACL,OAAO,EAAE,MAAM;gCACf,cAAc,EAAE,eAAe;gCAC/B,UAAU,EAAE,QAAQ;gCACpB,YAAY,EAAE,KAAK;6BACpB,aAED,eACE,KAAK,EAAE;wCACL,KAAK,EAAE,MAAM;wCACb,MAAM,EAAE,MAAM;wCACd,YAAY,EAAE,KAAK;wCACnB,eAAe,EACb,IAAI,CAAC,MAAM,KAAK,WAAW;4CACzB,CAAC,CAAC,aAAa,CAAC,QAAQ;4CACxB,CAAC,CAAC,SAAS;wCACf,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;wCAC1D,OAAO,EAAE,MAAM;wCACf,UAAU,EAAE,QAAQ;wCACpB,cAAc,EAAE,QAAQ;wCACxB,QAAQ,EAAE,MAAM;wCAChB,UAAU,EAAE,GAAG;qCAChB,YAEA,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAC/C,EACP,eACE,KAAK,EAAE;wCACL,QAAQ,EAAE,MAAM;wCAChB,OAAO,EAAE,SAAS;wCAClB,eAAe,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;wCAC5D,KAAK,EAAE,SAAS;wCAChB,YAAY,EAAE,KAAK;wCACnB,aAAa,EAAE,YAAY;qCAC5B,YAEA,IAAI,CAAC,KAAK,CAAC,UAAU,GACjB,IACH,EACN,aACE,KAAK,EAAE;gCACL,QAAQ,EAAE,MAAM;gCAChB,UAAU,EAAE,GAAG;gCACf,KAAK,EAAE,SAAS;gCAChB,MAAM,EAAE,WAAW;6BACpB,YAEA,IAAI,CAAC,KAAK,CAAC,IAAI,GACb,EACL,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,YAC/C,iBAAiB,IAAI,2BAAO,IAAI,CAAC,gBAAgB,YAAY,GAC1D,EACL,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,WAAW,IAAI,CAC3C,iBACE,KAAK,EAAE;gCACL,SAAS,EAAE,MAAM;gCACjB,KAAK,EAAE,MAAM;gCACb,OAAO,EAAE,KAAK;gCACd,eAAe,EAAE,SAAS;gCAC1B,KAAK,EAAE,SAAS;gCAChB,MAAM,EAAE,MAAM;gCACd,YAAY,EAAE,KAAK;gCACnB,QAAQ,EAAE,MAAM;gCAChB,UAAU,EAAE,GAAG;gCACf,MAAM,EAAE,SAAS;6BAClB,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gCACb,CAAC,CAAC,eAAe,EAAE,CAAC;gCACpB,WAAW,CAAC,IAAI,CAAC,CAAC;4BACpB,CAAC,0BAGM,CACV,KApFI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAqFtB,CACP,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/components/ProgressDashboard.js

@@ -0,0 +1,304 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_BLOOM_COLORS, STATUS_COLORS } from './types.js';
+const StatCard = ({ label, value, subValue, color }) => {
+    const cardStyle = {
+        backgroundColor: '#ffffff',
+        borderRadius: '12px',
+        padding: '16px',
+        border: '1px solid #e5e7eb',
+        flex: 1,
+        minWidth: '120px',
+    };
+    const labelStyle = {
+        fontSize: '12px',
+        color: '#6b7280',
+        marginBottom: '4px',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+    };
+    const valueStyle = {
+        fontSize: '28px',
+        fontWeight: 700,
+        color: color || '#1f2937',
+        lineHeight: 1.2,
+    };
+    const subValueStyle = {
+        fontSize: '12px',
+        color: '#9ca3af',
+        marginTop: '4px',
+    };
+    return (_jsxs("div", { style: cardStyle, children: [_jsx("div", { style: labelStyle, children: label }), _jsx("div", { style: valueStyle, children: value }), subValue && _jsx("div", { style: subValueStyle, children: subValue })] }));
+};
+const BloomProgressBar = ({ progress }) => {
+    const containerStyle = {
+        backgroundColor: '#ffffff',
+        borderRadius: '12px',
+        padding: '16px',
+        border: '1px solid #e5e7eb',
+    };
+    const titleStyle = {
+        fontSize: '14px',
+        fontWeight: 600,
+        color: '#374151',
+        marginBottom: '16px',
+    };
+    const rowStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '12px',
+    };
+    const labelStyle = {
+        width: '80px',
+        fontSize: '12px',
+        fontWeight: 500,
+        textTransform: 'capitalize',
+        color: '#374151',
+    };
+    const barContainerStyle = {
+        flex: 1,
+        height: '20px',
+        backgroundColor: '#e5e7eb',
+        borderRadius: '10px',
+        overflow: 'hidden',
+        marginRight: '12px',
+    };
+    const valueStyle = {
+        width: '60px',
+        textAlign: 'right',
+        fontSize: '12px',
+        color: '#6b7280',
+    };
+    return (_jsxs("div", { style: containerStyle, children: [_jsx("div", { style: titleStyle, children: "Progress by Bloom's Level" }), progress.map((p) => (_jsxs("div", { style: rowStyle, children: [_jsx("span", { style: labelStyle, children: p.level }), _jsx("div", { style: barContainerStyle, children: _jsx("div", { style: {
+                                height: '100%',
+                                width: `${p.percentage}%`,
+                                backgroundColor: DEFAULT_BLOOM_COLORS[p.level],
+                                borderRadius: '10px',
+                                transition: 'width 0.3s ease',
+                            } }) }), _jsxs("span", { style: valueStyle, children: [p.mastered, "/", p.total] })] }, p.level)))] }));
+};
+const ActivityFeed = ({ activities, onSkillClick }) => {
+    const containerStyle = {
+        backgroundColor: '#ffffff',
+        borderRadius: '12px',
+        padding: '16px',
+        border: '1px solid #e5e7eb',
+    };
+    const titleStyle = {
+        fontSize: '14px',
+        fontWeight: 600,
+        color: '#374151',
+        marginBottom: '16px',
+    };
+    const itemStyle = {
+        display: 'flex',
+        alignItems: 'flex-start',
+        padding: '10px 0',
+        borderBottom: '1px solid #f3f4f6',
+        cursor: 'pointer',
+    };
+    const iconStyle = (type) => ({
+        width: '32px',
+        height: '32px',
+        borderRadius: '50%',
+        backgroundColor: type === 'mastered'
+            ? '#dcfce7'
+            : type === 'practiced'
+                ? '#dbeafe'
+                : type === 'started'
+                    ? '#fef3c7'
+                    : '#f3e8ff',
+        color: type === 'mastered'
+            ? STATUS_COLORS.mastered
+            : type === 'practiced'
+                ? STATUS_COLORS.available
+                : type === 'started'
+                    ? '#f59e0b'
+                    : '#a855f7',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '14px',
+        marginRight: '12px',
+        flexShrink: 0,
+    });
+    const getIcon = (type) => {
+        switch (type) {
+            case 'mastered':
+                return '★';
+            case 'practiced':
+                return '✓';
+            case 'started':
+                return '→';
+            case 'reviewed':
+                return '↻';
+            default:
+                return '•';
+        }
+    };
+    const formatTime = (date) => {
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        if (minutes < 1)
+            return 'Just now';
+        if (minutes < 60)
+            return `${minutes}m ago`;
+        if (hours < 24)
+            return `${hours}h ago`;
+        if (days < 7)
+            return `${days}d ago`;
+        return date.toLocaleDateString();
+    };
+    return (_jsxs("div", { style: containerStyle, children: [_jsx("div", { style: titleStyle, children: "Recent Activity" }), activities.length === 0 ? (_jsx("div", { style: { color: '#9ca3af', fontSize: '14px', textAlign: 'center', padding: '20px' }, children: "No recent activity" })) : (activities.map((activity, index) => (_jsxs("div", { style: itemStyle, onClick: () => onSkillClick?.(activity.skill), children: [_jsx("div", { style: iconStyle(activity.type), children: getIcon(activity.type) }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { style: { fontSize: '13px', fontWeight: 500, color: '#1f2937' }, children: [activity.type === 'mastered' && 'Mastered ', activity.type === 'practiced' && 'Practiced ', activity.type === 'started' && 'Started ', activity.type === 'reviewed' && 'Reviewed ', _jsx("span", { style: { color: '#3b82f6' }, children: activity.skill.name })] }), _jsxs("div", { style: { fontSize: '11px', color: '#9ca3af', marginTop: '2px' }, children: [formatTime(activity.timestamp), activity.duration && ` • ${activity.duration} min`, activity.result && ` • ${activity.result.correct}/${activity.result.total} correct`] })] })] }, index))))] }));
+};
+const SkillList = ({ title, skills, emptyMessage, onSkillClick, actionLabel, onAction, }) => {
+    const containerStyle = {
+        backgroundColor: '#ffffff',
+        borderRadius: '12px',
+        padding: '16px',
+        border: '1px solid #e5e7eb',
+    };
+    const headerStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '12px',
+    };
+    const titleStyle = {
+        fontSize: '14px',
+        fontWeight: 600,
+        color: '#374151',
+    };
+    const actionStyle = {
+        fontSize: '12px',
+        color: '#3b82f6',
+        cursor: 'pointer',
+        fontWeight: 500,
+    };
+    const itemStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 0',
+        borderBottom: '1px solid #f3f4f6',
+        cursor: onSkillClick ? 'pointer' : 'default',
+    };
+    return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: headerStyle, children: [_jsx("span", { style: titleStyle, children: title }), actionLabel && onAction && (_jsx("span", { style: actionStyle, onClick: onAction, children: actionLabel }))] }), skills.length === 0 ? (_jsx("div", { style: { color: '#9ca3af', fontSize: '14px', textAlign: 'center', padding: '20px' }, children: emptyMessage })) : (skills.slice(0, 5).map((skill) => (_jsxs("div", { style: itemStyle, onClick: () => onSkillClick?.(skill), children: [_jsx("span", { style: {
+                            width: '8px',
+                            height: '8px',
+                            borderRadius: '50%',
+                            backgroundColor: DEFAULT_BLOOM_COLORS[skill.bloomLevel],
+                            marginRight: '10px',
+                        } }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: { fontSize: '13px', fontWeight: 500, color: '#1f2937' }, children: skill.name }), _jsxs("div", { style: { fontSize: '11px', color: '#9ca3af' }, children: [skill.estimatedMinutes, " min"] })] })] }, String(skill.id)))))] }));
+};
+const GoalsList = ({ goals }) => {
+    const containerStyle = {
+        backgroundColor: '#ffffff',
+        borderRadius: '12px',
+        padding: '16px',
+        border: '1px solid #e5e7eb',
+    };
+    const titleStyle = {
+        fontSize: '14px',
+        fontWeight: 600,
+        color: '#374151',
+        marginBottom: '12px',
+    };
+    const goalStyle = {
+        padding: '12px 0',
+        borderBottom: '1px solid #f3f4f6',
+    };
+    const formatDeadline = (date) => {
+        const now = new Date();
+        const diff = date.getTime() - now.getTime();
+        const days = Math.ceil(diff / 86400000);
+        if (days < 0)
+            return 'Overdue';
+        if (days === 0)
+            return 'Due today';
+        if (days === 1)
+            return 'Due tomorrow';
+        if (days < 7)
+            return `${days} days left`;
+        return date.toLocaleDateString();
+    };
+    return (_jsxs("div", { style: containerStyle, children: [_jsx("div", { style: titleStyle, children: "Learning Goals" }), goals.length === 0 ? (_jsx("div", { style: { color: '#9ca3af', fontSize: '14px', textAlign: 'center', padding: '20px' }, children: "No active goals" })) : (goals.map((goal, index) => (_jsxs("div", { style: goalStyle, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            marginBottom: '6px',
+                        }, children: [_jsx("span", { style: { fontSize: '13px', fontWeight: 500, color: '#1f2937' }, children: goal.name }), _jsxs("span", { style: { fontSize: '12px', fontWeight: 600, color: '#3b82f6' }, children: [Math.round(goal.progress * 100), "%"] })] }), _jsx("div", { style: {
+                            height: '6px',
+                            backgroundColor: '#e5e7eb',
+                            borderRadius: '3px',
+                            overflow: 'hidden',
+                            marginBottom: '4px',
+                        }, children: _jsx("div", { style: {
+                                height: '100%',
+                                width: `${goal.progress * 100}%`,
+                                backgroundColor: '#3b82f6',
+                                borderRadius: '3px',
+                            } }) }), goal.deadline && (_jsx("div", { style: { fontSize: '11px', color: '#9ca3af' }, children: formatDeadline(goal.deadline) }))] }, index))))] }));
+};
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Component
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * ProgressDashboard Component
+ *
+ * Comprehensive dashboard for tracking learning progress.
+ *
+ * @example
+ * ```tsx
+ * import { ProgressDashboard } from 'learngraph/components';
+ *
+ * function Dashboard() {
+ *   return (
+ *     <ProgressDashboard
+ *       stats={{
+ *         totalSkills: 50,
+ *         masteredSkills: 15,
+ *         inProgressSkills: 5,
+ *         availableSkills: 10,
+ *         totalLearningTime: 480,
+ *         averageMastery: 0.72,
+ *         streakDays: 7,
+ *         weeklyProgress: 3,
+ *       }}
+ *       bloomProgress={[
+ *         { level: 'remember', total: 10, mastered: 8, percentage: 80 },
+ *         { level: 'understand', total: 12, mastered: 5, percentage: 42 },
+ *         // ...
+ *       ]}
+ *       recentActivity={activities}
+ *       dueForReview={reviewSkills}
+ *       recommendations={recommendedSkills}
+ *       showDetailedStats
+ *       showActivityFeed
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const ProgressDashboard = ({ stats, bloomProgress, recentActivity, dueForReview = [], recommendations = [], goals = [], showDetailedStats = true, showActivityFeed = true, onSkillClick, onStartReview, className, style, }) => {
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        ...style,
+    };
+    const statsRowStyle = {
+        display: 'flex',
+        gap: '12px',
+        flexWrap: 'wrap',
+    };
+    const gridStyle = {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+        gap: '16px',
+    };
+    const progressPercentage = Math.round((stats.masteredSkills / stats.totalSkills) * 100);
+    return (_jsxs("div", { className: className, style: containerStyle, children: [_jsxs("div", { style: statsRowStyle, children: [_jsx(StatCard, { label: "Skills Mastered", value: `${stats.masteredSkills}/${stats.totalSkills}`, subValue: `${progressPercentage}% complete`, color: STATUS_COLORS.mastered }), _jsx(StatCard, { label: "Streak", value: `${stats.streakDays} days`, subValue: stats.streakDays >= 7 ? 'Keep it up!' : 'Build momentum', color: "#f59e0b" }), _jsx(StatCard, { label: "This Week", value: `+${stats.weeklyProgress}`, subValue: "skills mastered", color: "#3b82f6" }), _jsx(StatCard, { label: "Learning Time", value: `${Math.round(stats.totalLearningTime / 60)}h`, subValue: `${stats.totalLearningTime} min total` })] }), _jsx(BloomProgressBar, { progress: bloomProgress }), _jsxs("div", { style: gridStyle, children: [showActivityFeed && (_jsx(ActivityFeed, { activities: recentActivity, onSkillClick: onSkillClick })), _jsx(SkillList, { title: "Due for Review", skills: dueForReview, emptyMessage: "All caught up!", onSkillClick: onSkillClick, actionLabel: dueForReview.length > 0 ? 'Start Review' : undefined, onAction: onStartReview }), _jsx(SkillList, { title: "Recommended Next", skills: recommendations, emptyMessage: "Complete more skills to unlock recommendations", onSkillClick: onSkillClick }), goals.length > 0 && _jsx(GoalsList, { goals: goals })] }), showDetailedStats && (_jsxs("div", { style: statsRowStyle, children: [_jsx(StatCard, { label: "In Progress", value: stats.inProgressSkills, color: STATUS_COLORS.inProgress }), _jsx(StatCard, { label: "Available", value: stats.availableSkills, color: STATUS_COLORS.available }), _jsx(StatCard, { label: "Average Mastery", value: `${Math.round(stats.averageMastery * 100)}%` })] }))] }));
+};
+export default ProgressDashboard;
+//# sourceMappingURL=ProgressDashboard.js.map