learngraph 0.5.0 → 0.8.0

package/dist/cjs/components/SkillGraph.js

@@ -0,0 +1,636 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkillGraph = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * SkillGraph Component
+ *
+ * Interactive graph visualization for skills and prerequisites.
+ * Uses React Flow for rendering and interaction.
+ *
+ * @packageDocumentation
+ */
+const react_1 = require("react");
+const reactflow_1 = __importStar(require("reactflow"));
+const types_js_1 = require("./types.js");
+/**
+ * Calculate hierarchical layout (top-to-bottom)
+ */
+function calculateHierarchicalLayout(skills, edges) {
+    const nodeWidth = 200;
+    const nodeHeight = 80;
+    const levelGap = 120;
+    const nodeGap = 40;
+    // Build adjacency for levels
+    const prereqMap = new Map();
+    for (const edge of edges) {
+        const targetId = String(edge.targetId);
+        const sourceId = String(edge.sourceId);
+        if (!prereqMap.has(targetId)) {
+            prereqMap.set(targetId, new Set());
+        }
+        prereqMap.get(targetId).add(sourceId);
+    }
+    // Calculate levels (BFS from roots)
+    const levels = new Map();
+    const roots = skills.filter((s) => {
+        const prereqs = prereqMap.get(String(s.id));
+        return !prereqs || prereqs.size === 0;
+    });
+    // Initialize roots at level 0
+    for (const root of roots) {
+        levels.set(String(root.id), 0);
+    }
+    // BFS to assign levels
+    const queue = [...roots.map((r) => String(r.id))];
+    const visited = new Set(queue);
+    while (queue.length > 0) {
+        const nodeId = queue.shift();
+        const nodeLevel = levels.get(nodeId) || 0;
+        // Find dependents
+        for (const edge of edges) {
+            if (String(edge.sourceId) === nodeId) {
+                const targetId = String(edge.targetId);
+                const currentLevel = levels.get(targetId);
+                const newLevel = nodeLevel + 1;
+                if (currentLevel === undefined || newLevel > currentLevel) {
+                    levels.set(targetId, newLevel);
+                }
+                if (!visited.has(targetId)) {
+                    visited.add(targetId);
+                    queue.push(targetId);
+                }
+            }
+        }
+    }
+    // Assign level 0 to any remaining nodes
+    for (const skill of skills) {
+        if (!levels.has(String(skill.id))) {
+            levels.set(String(skill.id), 0);
+        }
+    }
+    // Group by level
+    const levelGroups = new Map();
+    for (const [nodeId, level] of levels) {
+        if (!levelGroups.has(level)) {
+            levelGroups.set(level, []);
+        }
+        levelGroups.get(level).push(nodeId);
+    }
+    // Calculate positions
+    const nodes = [];
+    const maxNodesInLevel = Math.max(...Array.from(levelGroups.values()).map((g) => g.length));
+    const totalWidth = maxNodesInLevel * (nodeWidth + nodeGap);
+    for (const [level, nodeIds] of levelGroups) {
+        const levelWidth = nodeIds.length * (nodeWidth + nodeGap);
+        const startX = (totalWidth - levelWidth) / 2;
+        nodeIds.forEach((nodeId, index) => {
+            nodes.push({
+                id: nodeId,
+                x: startX + index * (nodeWidth + nodeGap),
+                y: level * (nodeHeight + levelGap),
+            });
+        });
+    }
+    return { nodes };
+}
+/**
+ * Calculate force-directed layout (simplified)
+ */
+function calculateForceLayout(skills, edges) {
+    const width = 1000;
+    const height = 800;
+    // Simple grid layout with some randomness
+    const cols = Math.ceil(Math.sqrt(skills.length));
+    const cellWidth = width / cols;
+    const cellHeight = height / Math.ceil(skills.length / cols);
+    const nodes = skills.map((skill, index) => ({
+        id: String(skill.id),
+        x: (index % cols) * cellWidth + cellWidth / 2 + (Math.random() - 0.5) * 50,
+        y: Math.floor(index / cols) * cellHeight +
+            cellHeight / 2 +
+            (Math.random() - 0.5) * 50,
+    }));
+    return { nodes };
+}
+/**
+ * Calculate circular layout
+ */
+function calculateCircularLayout(skills) {
+    const centerX = 500;
+    const centerY = 400;
+    const radius = 300;
+    const nodes = skills.map((skill, index) => {
+        const angle = (2 * Math.PI * index) / skills.length;
+        return {
+            id: String(skill.id),
+            x: centerX + radius * Math.cos(angle),
+            y: centerY + radius * Math.sin(angle),
+        };
+    });
+    return { nodes };
+}
+/**
+ * Calculate layout based on algorithm
+ */
+function calculateLayout(skills, edges, layout) {
+    switch (layout) {
+        case 'hierarchical':
+        case 'dagre':
+            return calculateHierarchicalLayout(skills, edges);
+        case 'force':
+            return calculateForceLayout(skills, edges);
+        case 'circular':
+        case 'radial':
+            return calculateCircularLayout(skills);
+        default:
+            return calculateHierarchicalLayout(skills, edges);
+    }
+}
+const SkillNodeComponent = ({ data, selected }) => {
+    const { skill, type, bloomColor, onClick } = data;
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const backgroundColor = (0, react_1.useMemo)(() => {
+        switch (type) {
+            case 'mastered':
+                return types_js_1.STATUS_COLORS.mastered;
+            case 'available':
+                return types_js_1.STATUS_COLORS.available;
+            case 'locked':
+                return types_js_1.STATUS_COLORS.locked;
+            case 'target':
+                return '#ec4899'; // pink-500
+            default:
+                return bloomColor;
+        }
+    }, [type, bloomColor]);
+    // Difficulty color gradient (green to red)
+    const difficultyColor = (0, react_1.useMemo)(() => {
+        const d = skill.difficulty;
+        if (d < 0.3)
+            return '#22c55e'; // green
+        if (d < 0.5)
+            return '#84cc16'; // lime
+        if (d < 0.7)
+            return '#eab308'; // yellow
+        if (d < 0.85)
+            return '#f97316'; // orange
+        return '#ef4444'; // red
+    }, [skill.difficulty]);
+    const style = {
+        padding: '12px 16px',
+        borderRadius: '8px',
+        backgroundColor,
+        color: type === 'locked' ? '#374151' : '#ffffff',
+        border: selected ? '3px solid #1f2937' : skill.isThresholdConcept ? '2px solid #fbbf24' : '2px solid transparent',
+        boxShadow: selected
+            ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
+            : skill.isThresholdConcept
+                ? '0 0 12px rgba(251, 191, 36, 0.5)'
+                : '0 1px 3px rgba(0, 0, 0, 0.1)',
+        cursor: 'pointer',
+        minWidth: '180px',
+        maxWidth: '220px',
+        transition: 'all 0.2s ease',
+        position: 'relative',
+    };
+    const tooltipStyle = {
+        position: 'absolute',
+        top: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        marginTop: '8px',
+        backgroundColor: '#1f2937',
+        color: '#ffffff',
+        padding: '12px',
+        borderRadius: '8px',
+        fontSize: '12px',
+        minWidth: '250px',
+        maxWidth: '320px',
+        zIndex: 1000,
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.3)',
+        pointerEvents: 'none',
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, onClick: onClick, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "target", position: reactflow_1.Position.Top, style: { background: '#6b7280' } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }, children: [skill.isThresholdConcept && ((0, jsx_runtime_1.jsx)("span", { title: "Threshold Concept - Gateway to new understanding", style: { fontSize: '14px' }, children: "\uD83D\uDD11" })), (0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600, fontSize: '14px', flex: 1 }, children: skill.name })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    fontSize: '11px',
+                    opacity: 0.9,
+                    display: 'flex',
+                    gap: '6px',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                            textTransform: 'capitalize',
+                            backgroundColor: 'rgba(255,255,255,0.2)',
+                            padding: '2px 6px',
+                            borderRadius: '4px',
+                        }, children: skill.bloomLevel }), (0, jsx_runtime_1.jsxs)("span", { children: [skill.estimatedMinutes, "m"] }), skill.domain && ((0, jsx_runtime_1.jsx)("span", { style: { backgroundColor: 'rgba(255,255,255,0.15)', padding: '2px 6px', borderRadius: '4px' }, children: skill.domain }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '8px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            fontSize: '10px',
+                            opacity: 0.8,
+                            marginBottom: '2px'
+                        }, children: [(0, jsx_runtime_1.jsx)("span", { children: "Difficulty" }), (0, jsx_runtime_1.jsxs)("span", { children: [Math.round(skill.difficulty * 100), "%"] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            height: '4px',
+                            backgroundColor: 'rgba(255,255,255,0.2)',
+                            borderRadius: '2px',
+                            overflow: 'hidden'
+                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                width: `${skill.difficulty * 100}%`,
+                                height: '100%',
+                                backgroundColor: difficultyColor,
+                                borderRadius: '2px',
+                                transition: 'width 0.3s ease'
+                            } }) })] }), showTooltip && ((0, jsx_runtime_1.jsxs)("div", { style: tooltipStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600, marginBottom: '8px', fontSize: '13px' }, children: skill.name }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '8px', lineHeight: 1.4, opacity: 0.9 }, children: skill.description }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px', fontSize: '11px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Bloom:" }), " ", skill.bloomLevel] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Time:" }), " ", skill.estimatedMinutes, " min"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Difficulty:" }), " ", Math.round(skill.difficulty * 100), "%"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Mastery Req:" }), " ", Math.round(skill.masteryThreshold * 100), "%"] })] }), !!(skill.metadata?.cognitiveLoad || skill.metadata?.knowledgeType) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            marginTop: '8px',
+                            padding: '8px',
+                            backgroundColor: 'rgba(99, 102, 241, 0.15)',
+                            borderRadius: '4px',
+                            border: '1px solid rgba(99, 102, 241, 0.3)',
+                            fontSize: '11px'
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600, marginBottom: '6px', color: '#a5b4fc' }, children: "Cognitive Science" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }, children: [!!skill.metadata?.cognitiveLoad && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Load:" }), ' ', (0, jsx_runtime_1.jsx)("span", { style: {
+                                                    backgroundColor: skill.metadata.cognitiveLoad === 'high' ? 'rgba(239, 68, 68, 0.3)' :
+                                                        skill.metadata.cognitiveLoad === 'medium' ? 'rgba(234, 179, 8, 0.3)' : 'rgba(34, 197, 94, 0.3)',
+                                                    padding: '1px 4px',
+                                                    borderRadius: '3px',
+                                                    textTransform: 'capitalize'
+                                                }, children: String(skill.metadata.cognitiveLoad) })] })), !!skill.metadata?.knowledgeType && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Type:" }), " ", String(skill.metadata.knowledgeType)] }))] })] })), !!(skill.metadata?.commonMisconceptions && Array.isArray(skill.metadata.commonMisconceptions) && skill.metadata.commonMisconceptions.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '8px', fontSize: '11px' }, children: [(0, jsx_runtime_1.jsx)("strong", { style: { color: '#fca5a5' }, children: "Common Misconceptions:" }), (0, jsx_runtime_1.jsx)("ul", { style: { margin: '4px 0 0 16px', padding: 0, opacity: 0.9 }, children: skill.metadata.commonMisconceptions.slice(0, 2).map((m, i) => ((0, jsx_runtime_1.jsx)("li", { style: { marginBottom: '2px' }, children: m }, i))) })] })), !!(skill.metadata?.retrievalCues && Array.isArray(skill.metadata.retrievalCues) && skill.metadata.retrievalCues.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '8px', fontSize: '11px' }, children: [(0, jsx_runtime_1.jsx)("strong", { style: { color: '#86efac' }, children: "Retrieval Cues:" }), (0, jsx_runtime_1.jsx)("ul", { style: { margin: '4px 0 0 16px', padding: 0, opacity: 0.9, fontStyle: 'italic' }, children: skill.metadata.retrievalCues.slice(0, 2).map((c, i) => ((0, jsx_runtime_1.jsx)("li", { style: { marginBottom: '2px' }, children: c }, i))) })] })), skill.tags.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '8px' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Tags:" }), ' ', skill.tags.map((tag, i) => ((0, jsx_runtime_1.jsx)("span", { style: {
+                                    backgroundColor: 'rgba(255,255,255,0.15)',
+                                    padding: '2px 6px',
+                                    borderRadius: '4px',
+                                    marginRight: '4px',
+                                    marginTop: '2px',
+                                    display: 'inline-block'
+                                }, children: tag }, i)))] })), skill.isThresholdConcept && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            marginTop: '8px',
+                            padding: '8px',
+                            backgroundColor: 'rgba(251, 191, 36, 0.2)',
+                            borderRadius: '4px',
+                            border: '1px solid rgba(251, 191, 36, 0.5)'
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600, marginBottom: '4px' }, children: "\uD83D\uDD11 Threshold Concept" }), (0, jsx_runtime_1.jsx)("div", { style: { opacity: 0.9, fontSize: '11px' }, children: "Gateway concept that transforms understanding and unlocks new domains." }), !!skill.metadata?.thresholdDetails && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: '6px', fontSize: '10px', opacity: 0.85 }, children: !!skill.metadata.thresholdDetails?.unlocksDomains && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Unlocks:" }), " ", (skill.metadata.thresholdDetails.unlocksDomains).join(', ')] })) }))] }))] })), (0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Bottom, style: { background: '#6b7280' } })] }));
+};
+const PrerequisiteEdgeComponent = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, style = {}, }) => {
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const [edgePath, labelX, labelY] = (0, reactflow_1.getBezierPath)({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+    const strokeWidth = (0, react_1.useMemo)(() => {
+        const strength = data?.strength ?? 0.5;
+        return 1 + strength * 2;
+    }, [data?.strength]);
+    const strokeColor = (0, react_1.useMemo)(() => {
+        switch (data?.type) {
+            case 'required':
+                return '#374151'; // darker gray for required
+            case 'recommended':
+                return '#6b7280';
+            case 'optional':
+                return '#9ca3af';
+            default:
+                return '#9ca3af';
+        }
+    }, [data?.type]);
+    const edgeTypeLabel = (0, react_1.useMemo)(() => {
+        switch (data?.edgeType) {
+            case 'hard':
+                return 'Required';
+            case 'soft':
+                return 'Important';
+            case 'recommended':
+                return 'Helpful';
+            default:
+                return '';
+        }
+    }, [data?.edgeType]);
+    const edgeTypeColor = (0, react_1.useMemo)(() => {
+        switch (data?.edgeType) {
+            case 'hard':
+                return '#dc2626'; // red
+            case 'soft':
+                return '#f59e0b'; // amber
+            case 'recommended':
+                return '#22c55e'; // green
+            default:
+                return '#6b7280';
+        }
+    }, [data?.edgeType]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { id: id, style: {
+                    ...style,
+                    strokeWidth,
+                    stroke: strokeColor,
+                }, className: "react-flow__edge-path", d: edgePath, markerEnd: `url(#arrow-${data?.type || 'default'})` }), (0, jsx_runtime_1.jsx)("foreignObject", { x: labelX - 45, y: labelY - 12, width: 90, height: 24, style: { overflow: 'visible', pointerEvents: 'all' }, children: (0, jsx_runtime_1.jsxs)("div", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '4px',
+                        backgroundColor: '#ffffff',
+                        border: `1px solid ${edgeTypeColor}`,
+                        borderRadius: '10px',
+                        padding: '2px 8px',
+                        fontSize: '10px',
+                        fontWeight: 500,
+                        color: '#374151',
+                        cursor: data?.reasoning ? 'help' : 'default',
+                        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+                        position: 'relative',
+                    }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                width: '6px',
+                                height: '6px',
+                                borderRadius: '50%',
+                                backgroundColor: edgeTypeColor,
+                            } }), (0, jsx_runtime_1.jsxs)("span", { children: [Math.round((data?.strength ?? 0) * 100), "%"] }), showTooltip && data?.reasoning && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                position: 'absolute',
+                                top: '100%',
+                                left: '50%',
+                                transform: 'translateX(-50%)',
+                                marginTop: '8px',
+                                backgroundColor: '#1f2937',
+                                color: '#ffffff',
+                                padding: '10px 12px',
+                                borderRadius: '6px',
+                                fontSize: '11px',
+                                minWidth: '200px',
+                                maxWidth: '280px',
+                                zIndex: 1001,
+                                boxShadow: '0 10px 25px rgba(0, 0, 0, 0.3)',
+                                lineHeight: 1.4,
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                        fontWeight: 600,
+                                        marginBottom: '6px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '6px',
+                                    }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                                backgroundColor: edgeTypeColor,
+                                                color: '#fff',
+                                                padding: '1px 6px',
+                                                borderRadius: '4px',
+                                                fontSize: '10px',
+                                            }, children: edgeTypeLabel }), (0, jsx_runtime_1.jsx)("span", { children: "Prerequisite" })] }), (0, jsx_runtime_1.jsx)("div", { style: { opacity: 0.9 }, children: data.reasoning }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        marginTop: '6px',
+                                        paddingTop: '6px',
+                                        borderTop: '1px solid rgba(255,255,255,0.2)',
+                                        fontSize: '10px',
+                                        opacity: 0.7,
+                                    }, children: ["Strength: ", Math.round((data.strength ?? 0) * 100), "%"] })] }))] }) })] }));
+};
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Component
+// ─────────────────────────────────────────────────────────────────────────────
+const nodeTypes = {
+    skillNode: SkillNodeComponent,
+};
+const edgeTypes = {
+    prereqEdge: PrerequisiteEdgeComponent,
+};
+/**
+ * SkillGraph Component
+ *
+ * Interactive visualization of skills and their prerequisite relationships.
+ *
+ * @example
+ * ```tsx
+ * import { SkillGraph } from 'learngraph/components';
+ *
+ * function CurriculumView() {
+ *   const { skills, edges } = useLearnGraph();
+ *
+ *   return (
+ *     <SkillGraph
+ *       skills={skills}
+ *       edges={edges}
+ *       masteredSkillIds={['skill-1', 'skill-2']}
+ *       layout="hierarchical"
+ *       onNodeClick={(node) => console.log('Selected:', node.skill.name)}
+ *       height={600}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+const SkillGraph = ({ skills, edges, masteredSkillIds = [], targetSkillId, layout = 'hierarchical', onNodeClick, onEdgeClick, interactive = true, showMinimap = true, showControls = true, bloomColors = {}, width = '100%', height = 500, className, style, }) => {
+    const masteredSet = (0, react_1.useMemo)(() => new Set(masteredSkillIds), [masteredSkillIds]);
+    // Build prerequisite map for availability check
+    const prereqMap = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        for (const edge of edges) {
+            const targetId = String(edge.targetId);
+            const sourceId = String(edge.sourceId);
+            if (!map.has(targetId)) {
+                map.set(targetId, new Set());
+            }
+            map.get(targetId).add(sourceId);
+        }
+        return map;
+    }, [edges]);
+    // Check if skill is available
+    const isAvailable = (0, react_1.useCallback)((skillId) => {
+        if (masteredSet.has(skillId))
+            return false;
+        const prereqs = prereqMap.get(skillId);
+        if (!prereqs || prereqs.size === 0)
+            return true;
+        return Array.from(prereqs).every((id) => masteredSet.has(id));
+    }, [prereqMap, masteredSet]);
+    // Get bloom color
+    const getBloomColor = (0, react_1.useCallback)((level) => {
+        return bloomColors[level] ?? types_js_1.DEFAULT_BLOOM_COLORS[level];
+    }, [bloomColors]);
+    // Calculate layout
+    const layoutResult = (0, react_1.useMemo)(() => calculateLayout(skills, edges, layout), [skills, edges, layout]);
+    // Create position map
+    const positionMap = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        for (const node of layoutResult.nodes) {
+            map.set(node.id, { x: node.x, y: node.y });
+        }
+        return map;
+    }, [layoutResult]);
+    // Convert to React Flow nodes
+    const initialNodes = (0, react_1.useMemo)(() => {
+        return skills.map((skill) => {
+            const skillId = String(skill.id);
+            const position = positionMap.get(skillId) || { x: 0, y: 0 };
+            let nodeType = 'skill';
+            if (skillId === targetSkillId) {
+                nodeType = 'target';
+            }
+            else if (masteredSet.has(skillId)) {
+                nodeType = 'mastered';
+            }
+            else if (isAvailable(skillId)) {
+                nodeType = 'available';
+            }
+            else {
+                nodeType = 'locked';
+            }
+            return {
+                id: skillId,
+                type: 'skillNode',
+                position,
+                data: {
+                    skill,
+                    type: nodeType,
+                    bloomColor: getBloomColor(skill.bloomLevel),
+                    onClick: onNodeClick
+                        ? () => onNodeClick({
+                            id: skillId,
+                            label: skill.name,
+                            skill,
+                            position,
+                            type: nodeType,
+                        })
+                        : undefined,
+                },
+            };
+        });
+    }, [
+        skills,
+        positionMap,
+        targetSkillId,
+        masteredSet,
+        isAvailable,
+        getBloomColor,
+        onNodeClick,
+    ]);
+    // Convert to React Flow edges
+    const initialEdges = (0, react_1.useMemo)(() => {
+        return edges.map((edge) => {
+            // Visual type based on strength (for stroke styling)
+            const visualType = edge.strength > 0.7
+                ? 'required'
+                : edge.strength > 0.4
+                    ? 'recommended'
+                    : 'optional';
+            return {
+                id: String(edge.id),
+                source: String(edge.sourceId),
+                target: String(edge.targetId),
+                type: 'prereqEdge',
+                animated: targetSkillId
+                    ? String(edge.targetId) === targetSkillId
+                    : false,
+                data: {
+                    strength: edge.strength,
+                    type: visualType,
+                    edgeType: edge.type, // actual edge type: hard/soft/recommended
+                    reasoning: edge.reasoning, // pass reasoning for tooltip
+                },
+                markerEnd: {
+                    type: reactflow_1.MarkerType.ArrowClosed,
+                    width: 15,
+                    height: 15,
+                    color: '#6b7280',
+                },
+            };
+        });
+    }, [edges, targetSkillId]);
+    const [nodes, setNodes, onNodesChange] = (0, reactflow_1.useNodesState)(initialNodes);
+    const [flowEdges, setEdges, onEdgesChange] = (0, reactflow_1.useEdgesState)(initialEdges);
+    const reactFlowInstance = (0, react_1.useRef)(null);
+    // Track skill IDs for key generation to force remount on data change
+    const skillsKey = (0, react_1.useMemo)(() => {
+        return skills.map(s => String(s.id)).sort().join(',');
+    }, [skills]);
+    // Update when props change - use functional update to avoid stale closure
+    (0, react_1.useEffect)(() => {
+        console.log('[SkillGraph] Syncing nodes:', initialNodes.length, 'edges:', initialEdges.length);
+        setNodes(initialNodes);
+        setEdges(initialEdges);
+    }, [skillsKey]); // Only re-sync when actual skill data changes
+    // Fit view when nodes are set
+    (0, react_1.useEffect)(() => {
+        if (reactFlowInstance.current && nodes.length > 0) {
+            // Small delay to ensure nodes are rendered
+            const timer = setTimeout(() => {
+                console.log('[SkillGraph] Fitting view for', nodes.length, 'nodes');
+                reactFlowInstance.current?.fitView({ padding: 0.2, duration: 200 });
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [nodes.length]);
+    const onInit = (0, react_1.useCallback)((instance) => {
+        reactFlowInstance.current = instance;
+        // Initial fit view
+        setTimeout(() => {
+            instance.fitView({ padding: 0.2, duration: 200 });
+        }, 100);
+    }, []);
+    const containerStyle = {
+        width,
+        height,
+        ...style,
+    };
+    // Show empty state if no skills
+    if (skills.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: {
+                ...containerStyle,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: '#f9fafb',
+                borderRadius: '8px',
+                border: '2px dashed #d1d5db',
+                color: '#6b7280',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '48px', marginBottom: '16px' }, children: "\uD83D\uDCCA" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '18px', fontWeight: 600, marginBottom: '8px' }, children: "No Skills to Display" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '14px', textAlign: 'center', maxWidth: '300px' }, children: "Upload a syllabus to extract skills and visualize your learning graph." })] }));
+    }
+    // Debug logging
+    console.log('[SkillGraph] Rendering with', skills.length, 'skills,', nodes.length, 'nodes in state');
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { ...containerStyle, position: 'relative' }, children: (0, jsx_runtime_1.jsxs)(reactflow_1.default, { nodes: nodes, edges: flowEdges, onNodesChange: interactive ? onNodesChange : undefined, onEdgesChange: interactive ? onEdgesChange : undefined, onInit: onInit, nodeTypes: nodeTypes, edgeTypes: edgeTypes, fitView: true, fitViewOptions: { padding: 0.2 }, attributionPosition: "bottom-left", nodesDraggable: interactive, nodesConnectable: false, elementsSelectable: interactive, panOnDrag: interactive, panOnScroll: false, zoomOnScroll: interactive, zoomOnPinch: interactive, zoomOnDoubleClick: interactive, minZoom: 0.1, maxZoom: 4, preventScrolling: true, children: [(0, jsx_runtime_1.jsx)(reactflow_1.Background, { color: "#e5e7eb", gap: 16 }), showControls && (0, jsx_runtime_1.jsx)(reactflow_1.Controls, { showZoom: true, showFitView: true, showInteractive: false }), showMinimap && ((0, jsx_runtime_1.jsx)(reactflow_1.MiniMap, { nodeColor: (node) => {
+                        const data = node.data;
+                        switch (data?.type) {
+                            case 'mastered':
+                                return types_js_1.STATUS_COLORS.mastered;
+                            case 'available':
+                                return types_js_1.STATUS_COLORS.available;
+                            case 'locked':
+                                return types_js_1.STATUS_COLORS.locked;
+                            case 'target':
+                                return '#ec4899';
+                            default:
+                                return data?.bloomColor || '#94a3b8';
+                        }
+                    }, maskColor: "rgba(0, 0, 0, 0.1)" }))] }, skillsKey) }));
+};
+exports.SkillGraph = SkillGraph;
+exports.default = exports.SkillGraph;
+//# sourceMappingURL=SkillGraph.js.map